Menyediakan Projek CSS Tailwind dari Scratch

Menyediakan Projek CSS Tailwind dari Scratch

Tailwind CSS telah menjadi pilihan popular dalam kalangan pembangun untuk pendekatan penggayaannya yang mengutamakan utiliti. Ia menawarkan cara yang sangat disesuaikan dan cekap untuk mereka bentuk aplikasi web tanpa menulis CSS tersuai. Dalam panduan ini, kami akan membimbing anda melalui penyediaan projek CSS Tailwind dari awal.

Jadual Kandungan

1. Pengenalan kepada Tailwind CSS
2. Prasyarat
3. Menyediakan Projek Baharu
4. Memasang Tailwind CSS
5. Mengkonfigurasi Tailwind CSS
6. Membuat Fail CSS Tailwind Pertama Anda
7. Membina dan Menonton CSS
8. Mengoptimumkan Pengeluaran
9. Kesimpulan

Pengenalan kepada Tailwind CSS

Tailwind CSS ialah rangka kerja CSS yang mengutamakan utiliti yang menyediakan kelas utiliti peringkat rendah untuk membina reka bentuk tersuai terus dalam penanda anda. Tidak seperti rangka kerja CSS tradisional seperti Bootstrap atau Foundation, Tailwind tidak disertakan dengan komponen pra-reka bentuk. Sebaliknya, ia menyediakan satu set kelas utiliti yang membolehkan anda mereka bentuk komponen anda tanpa meninggalkan HTML anda.

Mengapa Menggunakan CSS Tailwind?

• Pendekatan Utiliti-Utama: Membolehkan anda menggunakan gaya terus dalam HTML anda, mengurangkan keperluan untuk CSS tersuai.
• Penyesuaian: Tailwind sangat boleh disesuaikan, membolehkan anda mengatasi tetapan lalai dan mencipta sistem reka bentuk unik anda.
• Reka Bentuk Responsif: Tailwind menawarkan utiliti reka bentuk responsif terbina dalam, menjadikannya mudah untuk mencipta reka bentuk yang mengutamakan mudah alih.
• Ketekalan: Memastikan penggayaan yang konsisten merentas aplikasi anda.

Prasyarat

Sebelum kami mula, pastikan anda telah memasang yang berikut:

• Node.js (v12 atau lebih tinggi)
• npm (Pengurus Pakej Nod)

Anda boleh memuat turun dan memasang Node.js dan npm daripada tapak web rasmi.

Menyediakan Projek Baru

Pertama, buat direktori baharu untuk projek anda dan navigasi ke dalamnya:

mkdir tailwind-project
cd tailwind-project

Seterusnya, mulakan projek npm baharu:

npm init -y

Arahan ini mencipta fail package.json, yang akan menjejaki kebergantungan projek dan skrip anda.

Memasang Tailwind CSS

Untuk memasang Tailwind CSS, anda perlu menambahkannya sebagai pergantungan pada projek anda. Jalankan arahan berikut:

npm install tailwindcss

Selepas memasang Tailwind CSS, anda perlu membuat fail konfigurasi. Fail ini akan membolehkan anda menyesuaikan tetapan lalai Tailwind CSS. Untuk menjana fail ini, jalankan:

npx tailwindcss init

Arahan ini mencipta fail tailwind.config.js dalam akar projek anda. Fail ini ialah tempat anda boleh menyesuaikan persediaan Tailwind anda.

Mengkonfigurasi Tailwind CSS

Buka fail tailwind.config.js. Anda sepatutnya melihat konfigurasi asas seperti ini:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Susun atur kandungan digunakan untuk menentukan laluan ke semua fail templat anda. Ini membolehkan Tailwind menggoncang pokok gaya yang tidak digunakan dalam pengeluaran. Tambahkan laluan ke fail HTML dan JavaScript anda:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Konfigurasi ini memberitahu Tailwind untuk mencari kelas dalam mana-mana fail .html atau .js di dalam direktori src.

Mencipta Fail CSS Tailwind Pertama Anda

Seterusnya, buat fail CSS baharu di mana anda akan mengimport gaya asas, komponen dan utiliti Tailwind. Buat direktori src dan di dalamnya, buat fail bernama styles.css:

mkdir src
touch src/styles.css

Buka fail styles.css dan tambahkan import berikut:

@tailwind base;
@tailwind components;
@tailwind utilities;

Arahan ini memberitahu Tailwind untuk memasukkan gaya asas, komponen dan utilitinya dalam fail CSS anda.

Membina dan Menonton CSS

Untuk menyusun CSS anda, anda perlu menggunakan CLI Tailwind. Tambahkan skrip binaan pada fail package.json anda:

"scripts": {
  "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
  "watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}

Skrip binaan menyusun fail src/styles.css anda dan mengeluarkan hasilnya kepada dist/styles.css. Skrip jam tangan melakukan perkara yang sama tetapi terus melihat perubahan dan menyusun semula secara automatik.

Untuk menyusun CSS anda buat kali pertama, jalankan:

npm run build

Arahan ini mencipta direktori dist dengan fail styles.css yang disusun.

Mencipta Fail HTML Pertama Anda

Sekarang, buat fail index.html dalam direktori src:

touch src/index.html

Buka fail index.html dan tambahkan HTML boilerplate berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Project</title>
  <link href="../dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-4xl font-bold text-center mt-10">Hello, Tailwind CSS!</h1>
</body>
</html>

Fail HTML ringkas ini termasuk fail CSS Tailwind yang disusun dan menambah tajuk bergaya.

Untuk melihat perubahan anda, buka fail index.html dalam penyemak imbas web.

Mengoptimumkan untuk Pengeluaran

Apabila anda bersedia untuk menggunakan projek anda, anda perlu mengoptimumkan CSS anda untuk pengeluaran. Tailwind menyediakan alat terbina dalam untuk membersihkan gaya yang tidak digunakan dan mengecilkan CSS anda.

To enable this, update your tailwind.config.js file to include the purge option:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, install @fullhuman/postcss-purgecss and cssnano:

npm install @fullhuman/postcss-purgecss cssnano

Create a postcss.config.js file in your project root and add the following configuration:

const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.{html,js}'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
    cssnano({
      preset: 'default',
    }),
  ],
}

This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.

Finally, update your build script in package.json:

"scripts": {
  "build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}

Run the build script to generate your optimized CSS:

npm run build

Your dist/styles.css file is now optimized for production.

Conclusion

Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.

Happy coding!

Atas ialah kandungan terperinci Menyediakan Projek CSS Tailwind dari Scratch. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!