Tailwind CSS Academy · Pelajaran

Modul CSS dan Tailwind

Gunakan utiliti Tailwind dalam Modul CSS untuk menggabungkan gaya komponen berskop dengan pendekatan berteraskan utiliti dalam aplikasi React dan Next.js.

Pelajaran 3 daripada 413 langkah

Modul CSS dan Tailwind ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.

Apakah CSS Modules

CSS Modules ialah fail CSS yang nama classnya secara lalai mempunyai skop setempat. Apabila anda mengimport CSS Module ke dalam komponen JavaScript, nama class tersebut ditukar kepada pengecam unik seperti Button_root__Xk2p1, sekali gus menghalang kebocoran gaya antara komponen. CSS Modules terbina dalam Next.js dan tersedia dalam kebanyakan persediaan React melalui webpack atau Vite.

/* Button.module.css */
.root {
  display: flex;
  align-items: center;
}

// Button.tsx
import styles from './Button.module.css';

const Button = () => (
  // styles.root resolves to 'Button_root__Xk2p1' at runtime
  <button className={styles.root}>Click me</button>
);

Mengapa Menggabungkan CSS Modules dengan Tailwind

Tailwind dan CSS Modules kelihatan bertentangan dari segi falsafah — Tailwind mengelakkan penamaan, manakala CSS Modules berfokus sepenuhnya pada penamaan setempat. Namun, dalam amalan kedua-duanya saling melengkapi. CSS Modules mengendalikan pemilih kompleks, rantaian :focus-within dan penggayaan unsur pseudo yang sukar dinyatakan oleh Tailwind. Tailwind pula mengendalikan sebahagian besar penggayaan visual. Bersama-sama, kedua-duanya meliputi 100% keperluan penggayaan.

Menggunakan @apply dalam CSS Modules

Corak yang paling biasa untuk menggabungkan kedua-duanya ialah menggunakan @apply dalam fail CSS Module. Anda mentakrifkan class berskop setempat dalam fail .module.css dan membinanya daripada utiliti Tailwind menggunakan @apply. Ini memberikan manfaat penskopan CSS Modules sambil mengekalkan penggayaan dalam kosa kata Tailwind.

/* Card.module.css */
.card {
  @apply rounded-xl bg-white p-6 shadow-sm;
}

.cardHeader {
  @apply border-b border-gray-100 pb-4 text-lg font-semibold text-gray-900;
}

.cardBody {
  @apply pt-4 text-sm text-gray-600 leading-relaxed;
}

Mengimport dan Menggunakan Class Module

Import CSS Module dalam komponen React dan rujuk nama class setempat melalui objek yang diimport. Gabungkan nama class module dengan utiliti Tailwind global dalam prop className menggunakan interpolasi rentetan atau clsx. Class module mengendalikan struktur, manakala utiliti Tailwind mengendalikan penggantian responsif atau khusus keadaan secara terus dalam JSX.

import styles from './Card.module.css';
import { clsx } from 'clsx';

interface CardProps {
  highlighted?: boolean;
  children: React.ReactNode;
}

export function Card({ highlighted, children }: CardProps) {
  return (
    <div
      className={clsx(
        styles.card,
        // Tailwind utilities alongside module classes
        highlighted && 'ring-2 ring-blue-500',
        'transition hover:shadow-md'
      )}
    >
      {children}
    </div>
  );
}

CSS Modules untuk Pemilih Kompleks

Gunakan CSS Modules khususnya apabila Tailwind tidak dapat menyatakan sesuatu pemilih. Contohnya, menggayakan unsur anak berdasarkan keadaan induk dengan pemilih kompleks, atau menggunakan unsur pseudo ::before dan ::after untuk kandungan hiasan yang tidak dapat dicapai dengan utiliti gelang atau bayang. Fail .module.css ialah tempat yang sesuai untuk pengecualian ini.

/* Dropdown.module.css */
/* Tailwind cannot easily target this nested state */
.trigger:focus-within .menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Decorative pseudo-element */
.triangle::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
  border-bottom-color: white;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

Menggabungkan Class Module

CSS Modules menyokong kata kunci composes untuk mewarisi gaya daripada class lain dalam fail yang sama atau fail module yang berbeza. Inilah pendekatan asli CSS Modules untuk penggunaan semula. Jika @apply membawa masuk utiliti Tailwind, composes pula membawa masuk class module lain — anda boleh menggabungkan kedua-duanya dalam fail yang sama untuk fleksibiliti maksimum.

/* base.module.css */
.baseButton {
  @apply inline-flex items-center rounded-lg px-4 py-2 font-semibold
         transition focus:outline-none focus:ring-2 focus:ring-offset-2;
}

/* Button.module.css */
.primary {
  composes: baseButton from './base.module.css';
  @apply bg-blue-600 text-white focus:ring-blue-500 hover:bg-blue-700;
}

.secondary {
  composes: baseButton from './base.module.css';
  @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-400;
}

CSS Modules dalam Next.js

Next.js menyokong CSS Modules terus tanpa sebarang konfigurasi — mana-mana fail yang berakhir dengan .module.css akan mempunyai skop secara automatik. Saluran pemprosesan PostCSS yang memproses Tailwind turut memproses CSS Modules, jadi @apply boleh digunakan dalam fail module tanpa persediaan tambahan. Hal ini menjadikan Next.js persekitaran yang ideal untuk gabungan Tailwind + CSS Modules.

// next.config.js — no extra config needed
// CSS Modules and Tailwind work automatically

// Any .module.css file is locally scoped:
// components/Hero/Hero.module.css  ← scoped
// styles/globals.css               ← global (Tailwind entry)

// Verify your postcss.config.js has tailwindcss:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Bila TIDAK Patut Menggunakan CSS Modules

CSS Modules menambah satu fail bagi setiap komponen dan satu lapisan perantaraan yang berlebihan untuk kebanyakan komponen Tailwind. Elakkannya bagi komponen ringkas yang semua gayanya boleh dimuatkan dengan mudah dalam className menggunakan utiliti. Simpan CSS Modules untuk komponen yang mempunyai CSS benar-benar kompleks dan melebihi kemampuan yang boleh dinyatakan oleh class utiliti — biasanya kurang daripada 10% komponen dalam projek Tailwind biasa.

// DON'T: CSS Module for a simple button — overkill
/* Button.module.css */
/* .btn { @apply px-4 py-2 rounded bg-blue-600 text-white; } */

// DO: Just use classes directly — much simpler
const Button = ({ children }) => (
  <button className="rounded bg-blue-600 px-4 py-2 font-semibold text-white
                     transition hover:bg-blue-700">
    {children}
  </button>
);

CSS Global berbanding Setempat dalam Next.js

Dalam Next.js, hanya helaian gaya global (globals.css) boleh diimport dalam _app.js atau layout.tsx. CSS Modules hanya diimport dalam komponen yang menggunakannya. Kekangan ini disengajakan — ia menghalang kebocoran gaya global secara tidak sengaja. Arahan global Tailwind sentiasa berada dalam globals.css; fail module hanya mengandungi peraturan berskop komponen.

// app/layout.tsx — import globals (Tailwind entry) here
import '../styles/globals.css';     // ✅ global CSS
// import './Card.module.css';      // ❌ Error: CSS Modules not allowed here

// components/Card.tsx — import module CSS here
import styles from './Card.module.css'; // ✅ scoped to this file

export function Card() {
  return <div className={styles.card}>...</div>;
}

Menyahpepijat Nama Class CSS Module

Dalam mod pembangunan, nama class CSS Module menyertakan nama fail dan nama class asal supaya mudah dibaca: Card_root__Xk2p1. Dalam pengeluaran, nama tersebut dipendekkan menjadi cincangan legap untuk menjimatkan saiz. Jika class module tidak diterapkan, periksa unsur itu dalam DevTools pelayar untuk melihat nama class yang dijana dan mengesahkan bahawa nama tersebut muncul dalam senarai class unsur. Semak kesilapan taip pada capaian sifat: styles.cardHeader, bukannya styles.card-header (camelCase diperlukan).

/* Card.module.css */
.card-header { /* ← hyphenated CSS class */ }

// Card.tsx
import styles from './Card.module.css';

// Accessing hyphenated classes requires bracket notation:
const el = <div className={styles['card-header']}>...</div>;

// Better: use camelCase in the module file:
/* .cardHeader { } */
const el2 = <div className={styles.cardHeader}>...</div>;

Sokongan TypeScript untuk CSS Modules

TypeScript secara lalai tidak mengetahui bentuk import CSS Module, menyebabkan styles.anyClass diperiksa jenisnya sebagai any. Pasang typescript-plugin-css-modules atau gunakan typed-css-modules untuk menjana pengisytiharan jenis .d.ts bagi setiap fail module. Ini memberikan pelengkapan automatik untuk nama class dalam penyunting anda dan mengesan kesilapan taip semasa penyusunan.

npm install -D typescript-plugin-css-modules

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      { "name": "typescript-plugin-css-modules" }
    ]
  }
}

// Now styles.cardHeader shows autocomplete in VS Code
// and TypeScript warns if you access a class that does not exist

Semakan Pantas

Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Rumusan Pelajaran

Dalam pelajaran ini, anda mempelajari: menggunakan @apply dalam CSS Modules untuk menggabungkan nama class berskop dengan utiliti Tailwind, bila hendak menggunakan CSS Modules berbanding kekal menggunakan className (pemilih kompleks dan unsur pseudo), serta sokongan TypeScript untuk capaian class CSS Module yang selamat dari segi jenis. Seterusnya, kita akan meneroka penskalaan Tailwind merentasi monorepo.

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Modul CSS dan Tailwind” percuma?

Ya — teks penuh “Modul CSS dan Tailwind” 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 “Modul CSS dan Tailwind”?

Gunakan utiliti Tailwind dalam Modul CSS untuk menggabungkan gaya komponen berskop dengan pendekatan berteraskan utiliti dalam aplikasi React dan Next.js. 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 3 daripada 4.

Berapa lamakah pelajaran “Modul CSS dan Tailwind” 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

← Kembali ke Tailwind CSS Academy