Code Editor: VSCode
VSCode Extension: Tailwind CSS IntelliSense
Package manager: NPM
- Buka direktori project
- inisialisasi npm :
npm init -y - install tailwindcss, postcss, dan autoprefixer :
npm install -D tailwindcss postcss autoprefixer -
npx tailwindcss init
tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
- hubungkan file output css yang dihasilkan tailwind kedalam tag head html seperti menghubungkan css biasa:
<link href="./output.css" rel="stylesheet">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
},
dan setelah pada saat start tailwind, gunakan perintah ini: npm run dev
3. Terakhir jika dirasa sudah fix dan mau deploy maka simpan file css terakhir, yakni dengan perintah berikut ini:
npx tailwindcss -o ./public/css/style.css --minify
atau bisa memasukannya kedalam package.json seperti dev diatas yakni:
"final": "npx tailwindcss -o ./public/css/style.css --minify"
dan dapat dijalankan dengan perintah npm run final
karena telah di minify maka selanjutnya ganti semua file html atau apapun itu yang menggunakan style.css dengan file ini. ganti di bagian tag link dan arahkan ke path file minify ini yakni /public/css/style.css