Matawebsite Promo Lebaran 2022

Install Tailwind CSS

date 09 Dec 2020
date Lev Yasin
date 2125
date Web Design
Install Tailwind CSS

Tailwind CSS dapat digunakan dengan teknologi apa pun seperti HTML / JavaScript, ReactJS, Angular, VueJS. Dalam posting ini, kita akan menggunakan Tailwind CSS dalam proyek dasar dengan HTML.

Saya harap Anda memiliki struktur proyek dasar seperti berikut:

└─ yourprojectfolder
  ├─ assets
  │  └─ css
  │     └─ styles.css
  ├─ index.css
  └─ index.html

Menyiapkan Tailwind CSS di Proyek kita

Tailwind CSS memberi kita dua opsi untuk penggunaan (npm, cdn). Dalam hal ini, kita akan menggunakan Paket NPM karena kita ingin mempelajari lebih dalam tentang Tailwind CSS.

Generate package.json

Jika Anda sudah bekerja dengan NodeJS, Anda dapat melakukannya, dan lompat ke langkah berikutnya.

Di terminal Anda, jalankan perintah berikut:

npm init -y

Perintah ini akan menghasilkan package.jsondi folder root kita, file ini memungkinkan kita untuk menginstal dependensi untuk proyek kita.

Pasang Tailwind CSS

Sekarang, kita perlu menginstal Tailwind CSS di proyek kita, jadi, kita akan menjalankan perintah ini:

yarn add tailwindcss
# or
npm install tailwindcss

Buat file tailwind.config.js

file tailwind.config.js memungkinkan kita menyesuaikan Tailwind CSS. Kita akan membicarakannya lebih banyak di masa mendatang.

Untuk menghasilkan file ini, Anda perlu menjalankan perintah berikut:

npx tailwindcss init
Kemudian, Tailwind CSS akan membuat tailwind.config.jsdi folder root kita.

Di dalam file ini kita memiliki sesuatu seperti ini:

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

Saya akan menjelaskan lebih lanjut tentang apa yang dapat kita lakukan di sini, tetapi sekarang, kita perlu melanjutkan menyiapkan Tailwind CSS.

Tambahkan Tailwind CSS ke CSS kita

Sekarang, kita perlu menambahkan beberapa baris kode di index.cssfile kita , jika Anda tidak memiliki file ini, Anda perlu membuat.

Buka file tersebut, dan masukkan kode berikut:

/* index.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

Menambahkan skrip dan menghasilkan Tailwind CSS Build

Sekarang, kita perlu membuat dan membuat skrip di package.jsonfile kita .

// package.json
...
  "scripts": {
    "build-css": "tailwindcss build index.css -o assets/css/styles.css",
  },
...

Dengan skrip ini kita dapat membuat build Tailwind CSS, satu-satunya hal yang perlu kita lakukan adalah menjalankan perintah berikut di terminal:

yarn build-css
# or
npm run build-css

Skrip ini akan menghasilkan styles.cssfile di folder assets kita, file ini berisi semua kelas yang dibutuhkan Tailwind, untuk saat ini file ini mungkin terlalu berat, tetapi kita akan memperbaikinya di masa mendatang.

Menambahkan Style di HTML kita

Di dalam index.html, Anda perlu menambahkan file CSS build:

<!-- index.html -->
...
<head>
  ....
  <title>Tailwind CSS Started</title>

  <!-- Styles -->
  <link rel="stylesheet" href="assets/css/styles.css">
  ...
</head>
...

Pada titik ini, kita telah menginstal Tailwind CSS, dan kita dapat mulai menulis beberapa kode HTML dengan class CSS Tailwind. Anda dapat melihat dokumentasi Tailwind CSS untuk informasi lebih lanjut.

Matawebsite Promo
lev_yasin.png

Lev Yasin

Instruktur Web Programming Mataweb

Sangat tertarik dengan dunia Pemrograman Web & Mobile, saat ini fokus pada bagian Backend Web Developer, menggunakan PHP sebagai bahasa pemrograman utama, biasanya saya menggunakan Laravel.

Artikel Populer

Halo, ada yang bisa kami bantu?
Daftar Sekarang