Menskalakan Tailwind di Monorepo
Bagikan satu tailwind.config.js di beberapa paket dalam monorepo, gunakan preset untuk token bersama, dan kelola ekstensi khusus ruang kerja.
Menskalakan Tailwind di Monorepo adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Dasar-Dasar Monorepo untuk Tailwind
monorepo adalah satu repositori yang berisi beberapa paket atau aplikasi dan dikelola dengan alat seperti Turborepo, Nx, atau ruang kerja pnpm. Saat beberapa aplikasi dalam monorepo menggunakan Tailwind, berbagi konfigurasi menjadi penting. Tanpa berbagi konfigurasi, setiap aplikasi menggandakan token warna, font, dan konfigurasi plugin—lalu perlahan menyimpang hingga antarmuka pengguna tidak konsisten di seluruh produk.
monorepo/
├── apps/
│ ├── web/ # Next.js marketing site
│ └── dashboard/ # React admin app
├── packages/
│ ├── ui/ # Shared component library
│ └── tailwind-config/ # ← Shared Tailwind config
├── package.json # Workspace root
└── turbo.jsonMembuat Paket Konfigurasi Bersama
Ekstrak konfigurasi Tailwind ke dalam paket khusus, yang biasanya diberi nama @repo/tailwind-config atau @acme/tailwind-config. Paket ini mengekspor objek konfigurasi dasar yang diimpor dan diperluas oleh setiap aplikasi pengguna. Paket bersama tersebut berada di packages/tailwind-config/ dengan package.json-nya sendiri yang menandainya sebagai dependensi internal.
// packages/tailwind-config/package.json
{
"name": "@acme/tailwind-config",
"version": "0.0.1",
"private": true,
"main": "./tailwind.config.js",
"devDependencies": {
"tailwindcss": "^3.4.0"
}
}
// packages/tailwind-config/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
brand: { 500: '#3b82f6', 900: '#1e3a8a' },
},
},
},
plugins: [],
};Menggunakan Konfigurasi Bersama
Setiap aplikasi mengimpor konfigurasi bersama menggunakan require, lalu menggabungkan atau memperluasnya dengan penimpaan khusus aplikasi. tailwind.config.js milik aplikasi menambahkan jalur content-nya sendiri (karena jalur konten selalu khusus untuk aplikasi) serta ekstensi apa pun yang unik bagi aplikasi tersebut. Konfigurasi bersama menangani semua token tema dan plugin yang umum.
// apps/web/tailwind.config.js
const sharedConfig = require('@acme/tailwind-config');
/** @type {import('tailwindcss').Config} */
module.exports = {
// Merge shared config
...sharedConfig,
// App-specific content paths (NEVER shared — paths differ per app)
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./public/**/*.html',
],
theme: {
...sharedConfig.theme,
extend: {
...sharedConfig.theme.extend,
// App-specific extensions
backgroundImage: {
'hero-gradient': 'linear-gradient(to bottom, #eff6ff, #ffffff)',
},
},
},
};Menggunakan Preset Tailwind
Sistem preset Tailwind adalah mekanisme resmi yang didukung untuk berbagi konfigurasi. Preset adalah objek yang diteruskan ke array presets dalam konfigurasi pengguna. Tidak seperti menggabungkan objek konfigurasi secara langsung, preset digabungkan secara cerdas oleh Tailwind—ekstensi tema digabungkan secara mendalam, plugin digabungkan, dan array konten digabungkan tanpa perlu penggabungan manual.
// packages/tailwind-config/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: { brand: { 500: '#3b82f6' } },
},
},
plugins: [require('@tailwindcss/forms')],
};
// apps/dashboard/tailwind.config.js
module.exports = {
presets: [require('@acme/tailwind-config')], // ← official preset
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
// Deep-merged with preset's theme.extend automatically
spacing: { 18: '4.5rem' },
},
},
};Jalur Konten Paket UI Bersama
Kesalahan umum yang penting dalam monorepo: jika Anda memiliki pustaka komponen packages/ui bersama yang mengekspor komponen dengan class Tailwind, aplikasi pengguna harus menyertakan file paket tersebut dalam array content-nya. Jika tidak, mesin JIT tidak memindai komponen bersama tersebut, dan class yang digunakan di sana akan dihapus dari build produksi.
// apps/web/tailwind.config.js
module.exports = {
presets: [require('@acme/tailwind-config')],
content: [
// App's own files
'./src/**/*.{js,ts,jsx,tsx}',
// ⬇ CRITICAL: include shared UI package files
'../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
],
};Menyiapkan Dependensi Ruang Kerja
Dalam monorepo ruang kerja pnpm atau npm, tambahkan paket konfigurasi bersama sebagai dependensi pengembangan menggunakan protokol ruang kerja. Ini membuat tautan simbolis ke paket lokal tanpa menerbitkannya ke npm. package.json aplikasi pengguna mencantumkan @acme/tailwind-config: workspace:*, dan alat build secara otomatis mengarahkannya ke paket lokal.
// apps/web/package.json
{
"name": "web",
"devDependencies": {
"@acme/tailwind-config": "workspace:*",
"tailwindcss": "^3.4.0"
}
}
// Install all workspace packages from the monorepo root:
pnpm install
# or
npm install --workspacesCaching Turborepo untuk Build Tailwind
Dalam monorepo Turborepo, konfigurasikan pipeline turbo.json untuk menyimpan keluaran build Tailwind dalam cache. Karena konfigurasi bersama merupakan dependensi build setiap aplikasi, perubahan pada packages/tailwind-config akan membatalkan cache build dengan benar untuk semua aplikasi pengguna. Hal ini mencegah CSS lama dari cache ikut dikirim saat sistem desain diperbarui.
// turbo.json
{
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**", "!.next/cache/**"]
},
"type-check": {
"dependsOn": ["^build"]
}
}
}
# Build only what has changed since last run:
npx turbo build
# Turbo caches CSS output and invalidates when tailwind-config changesMenangani Perbedaan Jalur Konten
Jalur konten adalah satu-satunya konfigurasi yang tidak dapat dibagikan—jalur tersebut harus bersifat lokal untuk setiap aplikasi. Struktur direktori tiap aplikasi berbeda. Hindari godaan untuk menempatkan jalur konten dalam konfigurasi bersama; jika dilakukan, beberapa file mungkin tidak ditemukan atau pemindaian menjadi terlalu luas. Konfigurasi bersama seharusnya hanya mengekspor tema, plugin, dan preset. Konten selalu didefinisikan secara lokal dalam konfigurasi setiap aplikasi pengguna.
// packages/tailwind-config/tailwind.config.js
// ⚠ DO NOT include content paths here
module.exports = {
// content: [] ← Leave this OUT of the shared config
theme: {
extend: { colors: { brand: { 500: '#3b82f6' } } },
},
plugins: [],
};
// Each app defines its own content:
// apps/web: './src/**/*.{js,ts,jsx,tsx}'
// apps/dashboard: './pages/**/*.tsx', './components/**/*.tsx'Memberi Versi pada Konfigurasi Bersama
Meskipun paket konfigurasi bersama bersifat privat (tidak pernah diterbitkan ke npm), tetap kelola versinya secara disiplin. Naikkan versinya dalam package.json setiap kali terjadi perubahan yang merusak kompatibilitas—menghapus warna, mengganti nama token, atau menghapus plugin. Pengguna preset kemudian dapat menetapkan versi tertentu dan melakukan peningkatan dengan sengaja, alih-alih membiarkan perubahan yang merusak menyebar secara diam-diam ke semua aplikasi sekaligus.
// packages/tailwind-config/package.json
{
"name": "@acme/tailwind-config",
"version": "1.3.0", // ← bump on breaking changes
"private": true,
"main": "./tailwind.config.js"
}
// apps/dashboard/package.json — pin to a specific version
{
"devDependencies": {
"@acme/tailwind-config": "workspace:^1.2.0" // pin minor version
}
}Menguji Perubahan Konfigurasi Bersama
Sebelum menggabungkan perubahan ke konfigurasi Tailwind bersama, jalankan pengujian regresi visual pada semua aplikasi yang menggunakannya. Perubahan pada warna merek atau penghapusan nilai spasi akan berdampak pada semua aplikasi secara bersamaan. Bangun semua aplikasi di CI (turbo build) dan jalankan perbandingan tangkapan layar pada halaman-halaman utama. Perlakukan perubahan konfigurasi sebagai perubahan yang dapat merusak lintas aplikasi dan komunikasikan dalam catatan perubahan.
# Run all affected builds when tailwind-config changes
npx turbo build --filter='...[origin/main]'
# Turborepo detects which apps depend on the changed package
# and builds only those apps
# Run visual regression on changed apps:
npx playwright test --project=web
npx playwright test --project=dashboardIntegrasi Storybook dalam Monorepo
Jika Anda menggunakan Storybook dalam paket UI bersama untuk mendokumentasikan komponen, konfigurasikan Storybook agar menggunakan preset Tailwind bersama yang sama. Tambahkan pengaya Tailwind untuk Storybook (@storybook/addon-styling-webpack atau padanan untuk kerangka kerja yang digunakan) dan arahkan ke konfigurasi bersama. Dengan demikian, komponen ditampilkan di Storybook menggunakan token yang sama seperti yang digunakan dalam aplikasi.
// packages/ui/.storybook/main.js
module.exports = {
addons: ['@storybook/addon-styling-webpack'],
framework: '@storybook/react-webpack5',
};
// packages/ui/.storybook/preview.js
import '../src/styles/globals.css'; // imports Tailwind
// packages/ui/tailwind.config.js
module.exports = {
presets: [require('@acme/tailwind-config')],
content: ['./src/**/*.{js,ts,jsx,tsx}'],
};Pemeriksaan Singkat
Uji pemahaman Anda tentang konsep Tailwind CSS Mastery dari pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini Anda telah mempelajari: membuat paket konfigurasi Tailwind bersama menggunakan sistem preset resmi untuk penggabungan mendalam yang cerdas, menyertakan berkas paket UI bersama dalam jalur konten untuk mencegah penghapusan class, dan memperlakukan perubahan konfigurasi sebagai perubahan yang dapat merusak lintas aplikasi dengan pemberian versi dan pengujian regresi visual. Selanjutnya, kita akan merancang sistem desain Tailwind lengkap untuk proyek puncak.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menskalakan Tailwind di Monorepo” gratis?
Ya — teks lengkap “Menskalakan Tailwind di Monorepo” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menskalakan Tailwind di Monorepo”?
Bagikan satu tailwind.config.js di beberapa paket dalam monorepo, gunakan preset untuk token bersama, dan kelola ekstensi khusus ruang kerja. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Menskalakan Tailwind di Monorepo” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Organisasi File dan Folder
- Berdampingan dengan CSS Lama
- Modul CSS dan Tailwind
- Menskalakan Tailwind di Monorepo