Menerapkan Tailwindcss pada HTML

photo by ervinismu

Seting Tailwindcss

1. Buat folder projek jika belum ada, dan masuk kedalam folder tersebut

$ mkdir mytailwindproject # buat folder
$ cd mytailwindproject # masuk kedalam folder

2. Melakukkan init

npm init -y

3. Install library yang dibutuhkan

npm install tailwindcss postcss-cli autoprefixer

4. Melakukkan init tailwindcss, ini otomatis akan membuat file tailwind.config.js pada root projek

npx tailwind init

dan akan otomatis terisi dengan config sebagai berikut :

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

5. Buat file postcss.config.js pada root project config untuk postcss, dan tambahkan baris berikut.

// postcss.config.js
module.exports = {
 plugins: [
   require(‘tailwindcss’),
   require(‘autoprefixer’),
 ]
}

config ini mengartikan bahwa kita menggunakan tailwindcss sebagai plugin postcss.

jika ingin menggunakan tools selain PostCSS, bisa mengacu pada dokumentasi berikut.