CSS config

Theme configuration via CSS custom properties — works with the TailwindCSS @theme at-rule or as plain CSS properties without TailwindCSS.

Tailwind CSS

The configuration is done via @theme config.

@import "winduum/tailwindcss/theme/config/index.css" layer(theme);

Individual properties

breakpoint

@theme {
  --breakpoint-xs: 22.5rem;
  --breakpoint-sm: 26rem;
  --breakpoint-md: 46.5rem;
  --breakpoint-lg: 60rem;
  --breakpoint-xl: 76rem;
  --breakpoint-2xl: 82rem;
  --breakpoint-3xl: 88rem;
  --breakpoint-4xl: 100rem;
  --breakpoint-xxl: 126rem;
  --breakpoint-2xxl: 158rem;
}

easing

@theme {
  --ease-anticipate: cubic-bezier(1, -0.4, 0.35, 0.95);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --ease-emphasized: linear(0, 0.0341 6.4%, 0.1281 11.41%, 0.6604 20.61%, 0.7653 24.59%, 0.8448 30.42%, 0.9155 40.62%, 0.9633 54.99%, 1);
}

font

@theme {
  --font-primary: var(--default-font-family);
  --font-secondary: var(--default-font-family);
  --font-weight-black: 900;
  --font-weight-extrabold: 800;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-light: 300;
  --font-weight-extralight: 200;
  --font-weight-thin: 100;
  --text-2xs: 0.625rem;
  --text-2xs--line-height: 0.75rem;
}

radius

@theme {
  --radius: 0.125rem;
  --radius-xs: calc(var(--radius) * 1);
  --radius-sm: calc(var(--radius) * 2);
  --radius-md: calc(var(--radius) * 3);
  --radius-lg: calc(var(--radius) * 4);
  --radius-xl: calc(var(--radius) * 6);
  --radius-2xl: calc(var(--radius) * 8);
  --radius-3xl: calc(var(--radius) * 12);
  --radius-4xl: calc(var(--radius) * 16);
  --radius-full: calc(infinity * 1px);
}

transition

@theme {
  --default-transition-property: color, background-color, border-color, outline-color, outline-offset, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  --transition-all: all var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-color: color var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-background: background var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-opacity: opacity var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-transform: transform var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-border: border-color var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-shadow: box-shadow var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-display: display var(--default-transition-duration) var(--default-transition-timing-function);
  --transition-overlay: overlay var(--default-transition-duration) var(--default-transition-timing-function);
  --view-transition-main-duration: var(--default-transition-duration);
}

@media (prefers-reduced-motion) {
  :root,
  :host {
    --default-transition-duration: 0;
    --view-transition-main-duration: 0;
  }
}

z-index

@theme {
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
}

Without Tailwind CSS

Each CSS property is defined in CSS in following path - src/theme/config/index.css.

We are using naming conventions as Tailwind CSS, so you can use these properties with or without TailwindCSS.

@import "./easing.css";
@import "./font.css";
@import "./radius.css";
@import "./spacing.css";
@import "./transition.css";
@import "./z.css";