Windi CSS

---

Oke kali ini kita berkenalan dengan si windi ya guysss.. jadi apa itu windi mari kita simak berikut ini…

Next generation utility-first CSS framework.

https://windicss.org/

Jadi jika kalian tau tailwindcss maka si windi ini bisa menjadi alternative lainnya.. secara sederhana sample penggunaannya adalah seperti ini..

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
  <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Erin Lindford</p>
      <p class="text-gray-500 font-medium">Product Engineer</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
      Message
    </button>
  </div>
</div>

Jadi hampir mirip lah ya dengan tailwind,, untuk framework apa saja yang disupportnya kalian bisa lihat disini karena sepertinya belum mendukung ReactJS yahh.. Jadi kita coba di Nuxt aja :

yarn add nuxt-windicss -D

di nuxt.config.js isi sebagai berikut:

export default {
  buildModules: [
    'nuxt-windicss',
  ],
}

windi.config.js

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  theme: {
    screens: {
      tablet: '640px',
      laptop: '1024px',
      desktop: '1280px',
    },
  },
})

Oke cukup sekian dulu ya ketemu lagi di post selanjutnya… cyaaaa…