Penyusunan Fail dan Folder
Susun titik masuk CSS, helaian gaya komponen dan fail konfigurasi anda dengan jelas apabila projek berkembang melebihi satu fail.
Penyusunan Fail dan Folder ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapa Penyusunan Fail Penting
Apabila projek Tailwind berkembang, bilangan fail yang melibatkan konfigurasi berkaitan CSS — konfigurasi Tailwind, konfigurasi PostCSS, helaian gaya global dan CSS pada peringkat komponen — semakin bertambah. Tanpa struktur yang jelas, fail-fail ini berselerak di seluruh projek dan sukar dicari. Penyusunan fail yang baik menjadikan lokasi untuk menambah nilai baharu, tempat penggantian global dan CSS yang berkaitan dengan setiap komponen jelas dengan serta-merta.
Fail Konfigurasi Peringkat Akar
Fail konfigurasi yang mempengaruhi keseluruhan binaan — tailwind.config.js, postcss.config.js dan .prettierrc — diletakkan di akar projek bersama-sama package.json. Fail-fail ini berada di peringkat akar kerana alat binaan mencarinya berdasarkan konvensyen. Jangan sesekali menyarangkannya di dalam src/ melainkan rantaian alat anda menyokong pencarian konfigurasi bukan akar secara jelas.
my-project/
├── tailwind.config.js # ← root level
├── postcss.config.js # ← root level
├── .prettierrc # ← root level
├── package.json
├── src/
│ ├── styles/
│ │ └── globals.css # @tailwind directives
│ └── components/Direktori Gaya
Letakkan semua fail CSS di dalam direktori src/styles/ khusus. Titik masuk utama ialah globals.css, yang mengandungi tiga arahan @tailwind, penggantian @layer untuk elemen asas dan import bagi sebarang helaian gaya tambahan. CSS khusus komponen diletakkan dalam fail berasingan seperti button.css atau prose-overrides.css, kemudian diimport ke dalam globals.css.
src/styles/
├── globals.css # main entry: @tailwind base/components/utilities
├── base.css # @layer base: html, body, heading resets
├── components.css # @layer components: .btn, .card, .badge
├── utilities.css # @layer utilities: custom utility helpers
└── prose-overrides.css # @tailwindcss/typography customizationsAnatomi globals.css
Fail globals.css ialah titik masuk yang diimport ke dalam akar aplikasi anda. Fail ini mengisytiharkan tiga arahan Tailwind mengikut turutan, kemudian mengimport sebarang helaian gaya tambahan. Elakkan meletakkan gaya tersuai secara terus dalam fail ini selain arahan tersebut — simpan pengisytiharan lapisan tersuai dalam fail masing-masing dan import fail itu di sini supaya lebih jelas.
/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Import custom layer files */
@import './base.css';
@import './components.css';
@import './utilities.css';Meletakkan CSS Komponen Bersama
Untuk rangka kerja berasaskan komponen seperti React atau Vue, anda boleh meletakkan fail CSS kecil bersama-sama fail komponen apabila gaya tersebut sangat berkait rapat. Walau bagaimanapun, dalam projek Tailwind, keadaan ini jarang berlaku kerana kebanyakan gaya diletakkan dalam nama kelas secara terus dalam penanda. Hadkan CSS yang diletakkan bersama kepada gaya yang benar-benar tidak dapat dinyatakan dengan utiliti — seperti pemilih :focus-within yang kompleks atau @keyframes.
src/components/
├── Button/
│ ├── Button.tsx
│ └── Button.module.css # Only if truly needed beyond Tailwind
├── Card/
│ ├── Card.tsx
│ └── Card.test.tsx
└── Modal/
└── Modal.tsx # No CSS file — pure Tailwind utilitiesMengasingkan Sambungan Tema
Apabila tailwind.config.js menjadi besar, keluarkan objek theme.extend ke dalam fail berasingan seperti theme/extend.js. Ini memastikan fail konfigurasi akar kekal ringkas dan mudah dibaca, manakala fail sambungan tema boleh berkembang mengikut keperluan. Import dan sebarkan semula sambungan itu dalam konfigurasi utama.
// theme/extend.js
module.exports = {
colors: {
brand: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' },
},
fontFamily: {
display: ['Inter', 'sans-serif'],
},
spacing: {
18: '4.5rem',
128: '32rem',
},
};
// tailwind.config.js
const themeExtend = require('./theme/extend');
module.exports = {
content: [...],
theme: { extend: themeExtend },
plugins: [...],
};Mengasingkan Konfigurasi Pemalam
Jika projek anda menggunakan beberapa pemalam Tailwind dan setiap satunya memerlukan konfigurasi yang banyak, keluarkan persediaan pemalam ke dalam fail masing-masing di dalam direktori plugins/. Setiap fail mengeksport pemalam yang telah dikonfigurasikan dan diimport dalam tatasusunan plugins konfigurasi utama. Dengan cara ini, anda dapat melihat pemalam yang aktif dengan mudah dan melaraskan tetapannya secara berasingan.
plugins/
├── typography.js # require('@tailwindcss/typography')({...})
├── forms.js # require('@tailwindcss/forms')({strategy:'class'})
└── custom-utils.js # custom plugin function
// tailwind.config.js
module.exports = {
plugins: [
require('./plugins/typography'),
require('./plugins/forms'),
require('./plugins/custom-utils'),
],
};Menyusun Fail Token
Token reka bentuk — colors, typography dan spacing — sebaik-baiknya ditakrifkan dalam direktori tokens/ berasingan dan bukannya secara sebaris dalam konfigurasi Tailwind. Setiap kategori token diletakkan dalam fail masing-masing: tokens/colors.js, tokens/typography.js, tokens/spacing.js. Fail-fail ini boleh dikongsi dengan alat reka bentuk, konfigurasi Storybook dan konfigurasi Tailwind secara serentak.
tokens/
├── colors.js # { primary: '#3b82f6', surface: '#ffffff', ... }
├── typography.js # { fontFamily: { sans: ['Inter', ...] }, ... }
└── spacing.js # { 18: '4.5rem', 128: '32rem', ... }
// tailwind.config.js
const colors = require('./tokens/colors');
const typography = require('./tokens/typography');
module.exports = {
theme: {
extend: { colors, ...typography },
},
};Corak Glob Kandungan
Pastikan corak glob kandungan tersusun dan mudah dibaca. Kumpulkannya mengikut jenis dan lokasi fail, bukannya menulis satu glob yang merangkumi semua perkara dan mengimbas terlalu luas. Komen setiap glob untuk menerangkan bahagian projek yang diliputinya. Selenggarakan senarai ini secara aktif — buang corak lama apabila direktori dinamakan semula atau removed, dan tambahkan corak baharu apabila jenis fail baharu diperkenalkan.
// tailwind.config.js
content: [
// Pages and layouts
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/layouts/**/*.{js,ts,jsx,tsx}',
// UI components
'./src/components/**/*.{js,ts,jsx,tsx}',
// Public HTML files
'./public/**/*.html',
// Email templates (if any)
'./emails/**/*.{js,ts,jsx,tsx}',
],Konvensyen Penamaan untuk Lapisan CSS
Apabila menggunakan @layer untuk menambah gaya tersuai, ikuti pendekatan penamaan yang konsisten. Gunakan @layer base untuk tetapan semula pada peringkat elemen (contohnya, a, h1, input), @layer components untuk corak berbilang utiliti dengan nama yang bermakna (.btn, .card), dan @layer utilities untuk utiliti tujuan tunggal yang tiada dalam set lalai Tailwind. Jangan campurkan tanggungjawab ini.
/* src/styles/base.css */
@layer base {
html { @apply scroll-smooth; }
h1 { @apply text-4xl font-extrabold; }
a { @apply text-blue-600 hover:text-blue-700; }
}
/* src/styles/components.css */
@layer components {
.btn { @apply rounded-lg px-4 py-2 font-semibold; }
}
/* src/styles/utilities.css */
@layer utilities {
.text-balance { text-wrap: balance; }
}README untuk Konvensyen Gaya
Dokumentasikan struktur fail dan folder dalam README projek anda atau STYLE_GUIDE.md khusus. Sertakan gambar rajah direktori src/styles/, terangkan fail yang digunakan untuk setiap jenis gaya dan nyatakan tanggungjawab penyelenggaraan glob kandungan. Pembangun baharu sepatutnya dapat memahami tempat untuk menambah warna tersuai atau kelas komponen baharu dengan membaca satu halaman dokumentasi sahaja.
# CSS Architecture
## File Map
- `tailwind.config.js` — theme tokens, content globs, plugins
- `src/styles/globals.css` — entry point, @tailwind directives
- `src/styles/base.css` — element resets in @layer base
- `src/styles/components.css` — .btn, .card, .badge in @layer components
- `tokens/colors.js` — brand color palette
## Adding a new custom utility
Add to `src/styles/utilities.css` inside `@layer utilities { }`. Semakan Ringkas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda mempelajari: mengekalkan fail konfigurasi di akar projek demi keserasian rantaian alat, menyusun gaya ke dalam direktori src/styles/ dengan fail berasingan bagi setiap lapisan, serta mengeluarkan token tema dan pemalam ke dalam fail khusus apabila konfigurasi berkembang. Seterusnya, kita akan meneroka cara CSS legasi boleh wujud bersama dalam projek sedia ada.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Penyusunan Fail dan Folder” percuma?
Ya — teks penuh “Penyusunan Fail dan Folder” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Penyusunan Fail dan Folder”?
Susun titik masuk CSS, helaian gaya komponen dan fail konfigurasi anda dengan jelas apabila projek berkembang melebihi satu fail. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Penyusunan Fail dan Folder” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Penyusunan Fail dan Folder
- Berfungsi Bersama CSS Legasi
- Modul CSS dan Tailwind
- Menskalakan Tailwind Merentas Monorepo