Apakah perbezaan antara CSS tailwind sebaris dan CSS tailwind berbilang fail?

Question

Adakah kita perlu menulisnya sebaris sebagai:

• Fail indeks .css yang mengandungi semua pelancar Tailwind

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

Atau dalam fail berasingan, contohnya:

• index.css
  • Fail 1.css
  • Fail 2.css

Answer 1

Fail index.css anda boleh mengandungi kelas utiliti. Anda menggunakan arahan tailwind tailwind -i index.css -o output.css untuk membina dan menjana fail css.

Dalam fail html anda: anda perlu menggunakan tailwind inline dalam atribut class:

    you rest of body

Yang terakhir yang anda perlukan ialah fail konfigurasi tailwind, yang dicipta secara automatik apabila anda menjalankan tailwind init dalam direktori kerja anda. Fail konfigurasi kelihatan seperti ini:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tujuan fail ini adalah untuk menyemak sama ada mana-mana fail html menggunakan kelas tailwind dan jika ya maka render berdasarkan output.css semasa menjalankan arahan bina.