Features #

Windi CSS is fully compatible with Tailwind CSS v2. On top of that, we have many additional features that boost your workflow further and open up many more possibilities.

Value Auto-infer #

Use arbitrary values in your classes and generate corresponding styles.

<!-- sizes and positions -->
<div class="p-5px mt-[0.3px]"></div>

<!-- colors -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>

<!-- grid template -->
<div class="grid-cols-[auto,1fr,30px]"></div>

Variant Groups #

Apply utilities to the same variant by grouping them with parentheses.

<div class="bg-white dark:hover:(bg-gray-800 font-medium text-white)"/>

<div class="bg-white dark:hover:bg-gray-800 dark:hover:font-medium dark:hover:text-white"/>

Responsive Design #

Extended responsive breakpoint control.

<div class="p-1 md:p-2 <lg:p-3"></div>

Important Prefix #

Prefix any utility classes with ! to set them as !important.

<div class="text-red-400 !text-green-300">Green</div>

Shortcuts #

Quickly combine utilities to create reusable components.

export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}

<div class="btn hover:btn-green"></div>

Dark Mode #

<div class="text-black dark:text-white"></div>

RTL #

<div class="text-green-400 rtl:(text-red-400 text-right)"></div>

Directives #

Tailwind-like @apply, @screen directives are fully supported.

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}

Visual Analyzer #

We provided a visual analyzer for you to have an overview of your utility usage and design system.