Tailwind CSS Academy · บทเรียน

การจัดระเบียบไฟล์และโฟลเดอร์

จัดโครงสร้างจุดเริ่มต้น CSS สไตล์ชีตของคอมโพเนนต์ และไฟล์คอนฟิกให้ชัดเจนเมื่อโปรเจกต์ขยายเกินกว่าจะอยู่ในไฟล์เดียว

บทเรียน 1 จาก 413 ขั้นตอน

การจัดระเบียบไฟล์และโฟลเดอร์ เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดการจัดระเบียบไฟล์จึงสำคัญ

เมื่อโครงการ Tailwind มีขนาดใหญ่ขึ้น จำนวนไฟล์ที่เกี่ยวข้องกับการกำหนดค่า CSS — การกำหนดค่า Tailwind การกำหนดค่า PostCSS สไตล์ชีตส่วนกลาง และ CSS ระดับคอมโพเนนต์ — จะเพิ่มขึ้นอย่างรวดเร็ว หากไม่มีโครงสร้างที่ชัดเจน ไฟล์เหล่านี้จะกระจัดกระจายทั่วโครงการและค้นหาได้ยาก การจัดระเบียบไฟล์ที่ดีทำให้เห็นได้ทันทีว่าควรเพิ่มค่าใหม่ที่ใด การแทนที่ระดับส่วนกลางอยู่ที่ใด และ CSS ใดเป็นของคอมโพเนนต์ใด

ไฟล์การกำหนดค่าระดับราก

ไฟล์การกำหนดค่าที่มีผลต่อกระบวนการสร้างทั้งหมด — tailwind.config.js, postcss.config.js และ .prettierrc — ให้วางไว้ที่รากโครงการร่วมกับ package.json ไฟล์เหล่านี้อยู่ระดับรากเพราะเครื่องมือสร้างค้นหาตามธรรมเนียม ห้ามซ้อนไฟล์เหล่านี้ไว้ใน src/ เว้นแต่ชุดเครื่องมือของคุณจะรองรับการค้นหาการกำหนดค่าที่ไม่ได้อยู่ระดับรากโดยเฉพาะ

my-project/
├── tailwind.config.js      # ← root level
├── postcss.config.js       # ← root level
├── .prettierrc             # ← root level
├── package.json
├── src/
│   ├── styles/
│   │   └── globals.css     # @tailwind directives
│   └── components/

ไดเรกทอรีสไตล์

วางไฟล์ CSS ทั้งหมดไว้ในไดเรกทอรี src/styles/ ที่จัดไว้โดยเฉพาะ จุดเริ่มต้นหลักคือ globals.css ซึ่งประกอบด้วยคำสั่ง @tailwind ทั้งสามคำสั่ง การแทนที่ด้วย @layer สำหรับองค์ประกอบพื้นฐาน และการนำเข้าสไตล์ชีตเพิ่มเติม CSS เฉพาะคอมโพเนนต์ให้แยกไว้ในไฟล์ต่างหาก เช่น button.css หรือ prose-overrides.css แล้วนำเข้าใน 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 customizations

โครงสร้างของ globals.css

ไฟล์ globals.css เป็นจุดเริ่มต้นที่นำเข้าในรากของแอปพลิเคชัน ไฟล์นี้ประกาศคำสั่ง Tailwind ทั้งสามคำสั่งตามลำดับ แล้วจึงนำเข้าสไตล์ชีตเพิ่มเติม หลีกเลี่ยงการใส่สไตล์แบบกำหนดเองโดยตรงในไฟล์นี้นอกเหนือจากคำสั่งดังกล่าว — ควรเก็บการประกาศเลเยอร์แบบกำหนดเองไว้ในไฟล์ของตนเอง แล้วนำเข้าไว้ที่นี่เพื่อให้เข้าใจได้ง่าย

/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import custom layer files */
@import './base.css';
@import './components.css';
@import './utilities.css';

การวาง CSS ของคอมโพเนนต์ไว้ร่วมกัน

สำหรับเฟรมเวิร์กที่ใช้คอมโพเนนต์ เช่น React หรือ Vue คุณสามารถวางไฟล์ CSS ขนาดเล็กไว้ข้างไฟล์คอมโพเนนต์ได้เมื่อสไตล์ผูกกับคอมโพเนนต์นั้นอย่างใกล้ชิด อย่างไรก็ตาม ในโครงการ Tailwind วิธีนี้พบไม่บ่อยนัก เนื่องจากสไตล์ส่วนใหญ่จะอยู่ในชื่อคลาสโดยตรงภายในมาร์กอัป ควรสงวน CSS ที่วางร่วมกันไว้เฉพาะสไตล์ที่ไม่สามารถแสดงด้วยยูทิลิตีได้จริง ๆ เช่น ตัวเลือก :focus-within ที่ซับซ้อน หรือ @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 utilities

การแยกส่วนขยายธีม

เมื่อ tailwind.config.js มีขนาดใหญ่ขึ้น ให้แยกออบเจ็กต์ theme.extend ไปไว้ในไฟล์ต่างหาก เช่น theme/extend.js วิธีนี้ทำให้ไฟล์การกำหนดค่าหลักสั้นและอ่านง่าย ขณะที่ไฟล์ส่วนขยายธีมสามารถเติบโตได้ตามต้องการ นำเข้าส่วนขยายแล้วกระจายค่ากลับเข้าไปในการกำหนดค่าหลัก

// 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: [...],
};

การแยกการกำหนดค่าปลั๊กอิน

หากโครงการของคุณใช้ปลั๊กอิน Tailwind หลายรายการและแต่ละรายการต้องมีการกำหนดค่าจำนวนมาก ให้แยกการตั้งค่าปลั๊กอินไปไว้ในไฟล์ของตนเองภายในไดเรกทอรี plugins/ แต่ละไฟล์ส่งออกปลั๊กอินที่กำหนดค่าแล้ว และนำเข้าในอาร์เรย์ plugins ของการกำหนดค่าหลัก วิธีนี้ทำให้เห็นได้ง่ายว่าปลั๊กอินใดกำลังทำงานอยู่ และปรับการตั้งค่าของแต่ละรายการแยกจากกันได้

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'),
  ],
};

การจัดระเบียบไฟล์โทเค็น

โทเค็นการออกแบบ — colors, typography และ spacing — ควรกำหนดไว้ในไดเรกทอรี tokens/ แยกต่างหาก แทนการเขียนไว้โดยตรงในการกำหนดค่า Tailwind โทเค็นแต่ละหมวดหมู่ควรอยู่ในไฟล์ของตนเอง ได้แก่ tokens/colors.js, tokens/typography.js และ tokens/spacing.js ไฟล์เหล่านี้สามารถใช้ร่วมกันโดยเครื่องมือออกแบบ การกำหนดค่า Storybook และการกำหนดค่า Tailwind ได้พร้อมกัน

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 },
  },
};

รูปแบบโกลบของเนื้อหา

จัดรูปแบบโกลบของเนื้อหาให้เป็นระเบียบและอ่านง่าย จัดกลุ่มตามประเภทและตำแหน่งของไฟล์ แทนการเขียนโกลบแบบครอบคลุมทุกอย่างเพียงรายการเดียวที่สแกนกว้างเกินไป ใส่คำอธิบายให้แต่ละโกลบเพื่อบอกว่าครอบคลุมส่วนใดของโครงการ ดูแลรายการนี้อย่างสม่ำเสมอ — ลบรูปแบบเก่าเมื่อมีการเปลี่ยนชื่อหรือลบไดเรกทอรี และเพิ่มรูปแบบใหม่เมื่อมีการนำประเภทไฟล์ใหม่เข้ามา

// 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}',
],

หลักการตั้งชื่อเลเยอร์ CSS

เมื่อใช้ @layer เพื่อเพิ่มสไตล์แบบกำหนดเอง ให้ใช้หลักการตั้งชื่อที่สอดคล้องกัน ใช้ @layer base สำหรับการรีเซ็ตระดับองค์ประกอบ เช่น a, h1 และ input ใช้ @layer components สำหรับรูปแบบที่ประกอบด้วยยูทิลิตีหลายรายการและมีชื่อสื่อความหมาย เช่น .btn, .card และใช้ @layer utilities สำหรับยูทิลิตีที่มีจุดประสงค์เดียวและไม่มีอยู่ในชุดเริ่มต้นของ Tailwind ห้ามปะปนหน้าที่เหล่านี้เข้าด้วยกัน

/* 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 สำหรับแนวทางการใช้สไตล์

บันทึกโครงสร้างไฟล์และโฟลเดอร์ไว้ใน README ของโครงการ หรือใน STYLE_GUIDE.md ที่จัดทำขึ้นโดยเฉพาะ ใส่แผนผังของไดเรกทอรี src/styles/ อธิบายว่าสไตล์แต่ละประเภทควรอยู่ในไฟล์ใด และระบุผู้รับผิดชอบในการดูแลโกลบของเนื้อหา นักพัฒนารายใหม่ควรเข้าใจได้จากเอกสารเพียงหน้าเดียวว่าควรเพิ่มสีแบบกำหนดเองใหม่หรือคลาสคอมโพเนนต์ใหม่ไว้ที่ใด

# 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 { }`.

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจแนวคิด Tailwind CSS Mastery จากบทเรียนนี้

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวนบทเรียน

ในบทเรียนนี้ คุณได้เรียนรู้เกี่ยวกับการเก็บไฟล์การกำหนดค่าไว้ที่รากโครงการเพื่อให้เข้ากันได้กับชุดเครื่องมือ การจัดสไตล์ไว้ในไดเรกทอรี src/styles/ โดยแยกไฟล์ตามแต่ละเลเยอร์ และการแยกโทเค็นธีมกับปลั๊กอินไปไว้ในไฟล์เฉพาะเมื่อการกำหนดค่ามีขนาดใหญ่ขึ้น บทถัดไป เราจะสำรวจการใช้งานร่วมกับ CSS แบบเดิมในโครงการที่มีอยู่

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การจัดระเบียบไฟล์และโฟลเดอร์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดระเบียบไฟล์และโฟลเดอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดระเบียบไฟล์และโฟลเดอร์”

จัดโครงสร้างจุดเริ่มต้น CSS สไตล์ชีตของคอมโพเนนต์ และไฟล์คอนฟิกให้ชัดเจนเมื่อโปรเจกต์ขยายเกินกว่าจะอยู่ในไฟล์เดียว คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดระเบียบไฟล์และโฟลเดอร์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Tailwind CSS Academy