Memulai Project dengan TailwindCSS

TailwindCSS

KuReview – Kali ini saya akan membagikan init project atau cara yang saya gunakan saat akan memulai dengan menggunakan TailwindCSS.
TailwindCSS itu bisa

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

–TailwindCSS Site

Lantas bagaimana kita init project dengan menggunakan TailwindCSS?

npm init

Install TailwindCSS

#using npm
npm install tailwindcss

Menambahkan TailwindCSS ke CSS

  • Buatlah Folder /src dan didalamnya buatlah file style.css.
  • Tambahkan kode berikut di file style.css
@tailwind base;

@tailwind components;

@tailwind utilities;

Membuat Folder dist untuk File Project dan CSS

Pada file index.html, kita akan melakukan import css pada folder dist. File CSS itu merupakan build dari style di src.

Menambahkan Config File TailwindCSS

Pada folder project, di terminal atau bila menggunakan VS Code, ketikkan perintah berikut di untuk menambahkan Config TailwindCSS

npx tailwindcss init

Ini sifatnya Opsional. Namun, akan sangat berguna apabila kita ingin menggunakan warna, margin/padding, border color dan custom yang lain terkait dengan web yang akan kita bangun.

Tambahkan Script Build TailwindCSS pada Package.json

Kalau sudah, tinggal jalankan

npm run build:css

untuk melakukan build pada project kita dan akan terjadi hasilnya dengan style.css pada direktori dist/style.css dengan berbagai file TailwindCSS.

Additional :

Menambahkan POSTCSS & AutoPrefixer

npm install postcss-cli autoprefixer

Buat File Config PostCSS

  • Beri nama postcss.config.js dan import plugin Tailwind dan Autoprefixer
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

Ubah NPM Script

Pada script build, ubah menjadi seperti ini

 "build": "postcss css/style.css -o public/build/style.css"

Hasilnya, nanti pada file style.css kita akan seperti ini bila sukses

Menambahkan Live Server

Ini untuk mempermudah kita dalam melakukan development, sehingga tidak perlu untuk F5 melulu. Sebenarnya, bisa dilakukan dengan extension dari VS Code. Namun, sayangnya pasti akan merubah direktori import file css. Sehingga saya menyarankan untuk menggunakan live-server agar root file import sama.

npm install -g live-server

Jalankan dengan perintah

live-server dist/

Selesai!

Itu aja dokumentasi melakukan init project / memulai menggunakan project dengan menggunakan TailwindCSS. Semoga Bermanfaat Ya!

https://karyakarsa.com/naufaldisatriya

Sumber :

https://tailwindcss.com/course/setting-up-tailwind-and-postcss/

Tailwind Course

1 thought on “Memulai Project dengan TailwindCSS

Leave a Reply

Your email address will not be published. Required fields are marked *