Belajar Tailwind CSS : Menginstal Tailwind CSS

Assalamualaikum Warohmatulloh Wabarokatuh, setelah mengenal Tailwind CSS, ga afdol rasanya kalau kita ga cicipin rasanya. Apalagi 80 persen orang yang sudah pakai Tailwind CSS merasa puas, ayo kita cobain bareng mulai dari menginstal Tailwind CSS terlebih dulu.

Menginstal Tailwind CSS dengan npm

Untuk kebanyakan proyek sebaiknya kita menginstal menggunakan npm, karena kita bisa menggunakan fitur kustomisasi dari Tailwind CSS.

# Menggunakan npm
npm install tailwindcss

# Menggunakan Yarn
yarn add tailwindcss

Menambahkan Tailwind ke CSS

Gunakan directive @tailwind untuk menyisipkan Tailwind base, component, utilities ke dalam CSS kita.

@tailwind base;

@tailwind components;

@tailwind utilities;

Tailwind akan mengubah directive tersebut menjadi generated CSS.

Jika kawan kawan menggunakan postcss-import atau tools yang menggunakan post-css seperti Webpacker yang ada pada Rails. Jangan gunakan @tailwind tapi gunakan @import untuk menghindari masalah ketika mengimpor file lainnya.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Buat file konfiguras Tailwind (opsional)

Jika kita ingin melakukan kustomisasi Tailwind, kita bisa buat file konfigurasi menggunakan Tailwind CLI yang otomatis ada ketika kita menginstall package npm tailwindcss.

npx tailwindcss init

Perintah tersebut akan menghasilkan file tailwind.config.js pada root folder proyek.

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

Untuk melakukan konfigruasi Tailwind lebih lanjut, silakan menuju ke dokumentasinya tentang konfigurasi.

Memproses CSS dengan Tailwind

Menggunakan Tailwind CLI

Untuk proyek-proyek sederhana atau cuma pengen coba Tailwind kita bisa gunakan Tailwind CLI untuk memproses CSS.

npx tailwindcss build styles.css -o output.css

Gunakan perintah npx tailwindcss help build untuk mempelajari opsi lainnya.

Menggunakan Tailwind dengan PostCSS

Untuk kebanyakan proyek kita ingin menggunakan Tailwind sebagai plugin PostCSS.

Artinya kita menambahkan Tailwind sebagai plugin di dalam file postcss.config.js :

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Tailwind menyertakan instruksi lebih lanjut untuk penggunaan tools lain untuk memulai PostCSS, lengkapnya cek di dokumentasi PostCSS.

Webpack

Tambahkan tailwindcss sebagai plugin di dalam file postcss.config.js :

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

atau sertakan langsung di d palam konfigurasi post-css-loader yang ada di dalam file webpack.config.js :

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        // ...
        use: [
          // ...
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        ],
      }
    ],
  }
}

Gulp

Tambahkan Tailwind ke dalam daftar plugin yang kamu kirim di gulp-postcss.

gulp.task('css', function () {
  const postcss = require('gulp-postcss')

  return gulp.src('src/styles.css')
    // ...
    .pipe(postcss([
      // ...
      require('tailwindcss'),
      require('autoprefixer'),
      // ...
    ]))
    // ...
    .pipe(gulp.dest('build/'))
})

Laravel Mix

Jika kita menggunakan plain CSS, gunakan method postCss untuk memproses CSS dan sisipkan tailwindcss sebagai plugin.

mix.postCss('resources/css/main.css', 'public/css', [
  require('tailwindcss'),
])

Jika menggunakan preprocessor gunakan method options untuk menambahkan tailwindcss sebagai plugin PostCSS.

const tailwindcss = require('tailwindcss')

mix.less('resources/less/app.less', 'public/css')
  .options({
    postCss: [
      tailwindcss('./path/to/your/tailwind.config.js'),
    ]
  })

Catatan untuk pengguna Sass dikarenakan masalah yang belum teratasi dengan salah satu dependency Laravel Mix. Untuk menggunakan Sass dengan Tailwind nonaktifkan processCssUrls.

Meginstal Tailwind CSS melalui CDN

Sebelum menggunakan CDN ada beberapa hal yang perlu digaris bawahi :

• Kita tidak bisa mengkustomisasi tema bawaan Tailwind.
• Kita tidak bisa menggunakan directive @apply, @variants dll.
• Kita tidak bisa mengaktifkan fitur seperti group-hover.
• Kita tidak bisa meginstal plugin pihak ketiga.

Sebaiknya instal Tailwind menggunakan npm.

Tapi jika ingin coba Tailwind untuk demo atau bereksperimen. Gunakan versi terbaru build Tailwind melalui CDN.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Sudah baca? langsung instal dong terus coba bereksperimen, atau nunggu tulisan berikutnya dari Kawan Koding? Haha, sampai ketemu di tulisan berikutnya.

Wassalamualaikum Warohmatulloh Wabarokatuh.