title = "Inroduction"
url = "/"
layout = "default"
meta_title = "Introduction"
meta_description = "theme octobercms wintercms october winter vite windicss windi css"
is_hidden = 0
==
<div class="container max-w-6xl grid grid-cols-2 gap-y-10 justify-items-center items-center mt-40 mb-20">
  <img src='https://vitejs.dev/logo.svg' alt='Vite' class="w-50"/>
  <img src='https://windicss.org/assets/logo.svg' alt='Vite' class="w-50"/>

    <h2 class="text-3xl font-semibold">Vite</h2>
    <h2 class="text-3xl font-semibold">Windi CSS</h2>

</div>

<div class="container max-w-6xl mt-30 leading-loose">
    <h2 class="text-4xl tracking-wider font-semibold">Why Windi CSS?</h2>
    <ul class="mt-10">
        <li>⚡️ <strong>It's FAST</strong> - 20~100x times faster than Tailwind on Vite</li>
        <li>🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2)</li>
        <li>🍃 Load configurations from <code>tailwind.config.js</code></li>
        <li>📄 CSS <code>@apply</code> / <code>@screen</code> directives like Tailwind
        </li>
        <li>🎳 Support Variant Groups - e.g. <code>bg-gray-200 hover:(bg-gray-100 text-red-300)</code></li>
        <li>😎
            "Design in Devtools" - if you work this way in the traditional Tailwind, Just add the following line to your main entry `import 'virtual:windi-devtools'`
        </li>

        <li class="space-y-4">⚡️ <strong>With Attributify</strong>. You can write this <br>
            <img  src="{{ 'assets/images/befor-attributify.svg'|theme }}" alt="Before"> <br>
            like this
            <img src="{{ 'assets/images/attributify.svg'|theme }}" alt="Attributify">
        </li>
    </ul>
</div>
</div>