Tailwind CSS Academy · Oppitunti

Tailwindin skaalaaminen monorepossa

Jakakaa yksi tailwind.config.js useiden monorepon pakettien kesken, käyttäkää presetejä yhteisille tokeneille ja hallitkaa työtilakohtaisia laajennuksia.

Oppitunti 4/413 vaihetta

Tailwindin skaalaaminen monorepossa on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.

Tailwindin monorepon perusteet

Monorepo on yksi repositorio, joka sisältää useita paketteja tai sovelluksia ja jota hallitaan esimerkiksi Turborepon, Nx:n tai pnpm workspacesin kaltaisilla työkaluilla. Kun monorepon useat sovellukset käyttävät Tailwindia, asetusten jakamisesta tulee tärkeää. Ilman jakamista jokainen sovellus monistaa väritunnisteet, fontit ja lisäosamääritykset — erot kasvavat vähitellen, kunnes käyttöliittymä ei ole tuotteissa yhdenmukainen.

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.json

Jaetun asetuspakkauksen luominen

Siirtäkää Tailwindin asetukset erilliseen pakettiin, jonka nimi on yleensä @repo/tailwind-config tai @acme/tailwind-config. Tämä paketti vie ulos perusasetuksen oliona, jonka jokainen käyttävä sovellus tuo ja jota se laajentaa. Jaettu paketti sijaitsee hakemistossa packages/tailwind-config/, ja sillä on oma package.json, jossa se merkitään sisäiseksi riippuvuudeksi.

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

Jaetun asetuksen käyttäminen

Jokainen sovellus tuo jaetun asetuksen require-komennolla ja yhdistää sen sovelluskohtaisiin ylikirjoituksiin spread-syntaksilla tai yhdistämällä. Sovelluksen tailwind.config.js lisää omat content-polkunsa (koska sisältöpolut ovat aina sovelluskohtaisia) sekä kyseiselle sovellukselle ominaiset laajennukset. Jaettu asetus käsittelee kaikki yhteiset teeman tunnisteet ja lisäosat.

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

Tailwind Presets -asetusten käyttäminen

Tailwindin preset-järjestelmä on virallisesti tuettu tapa jakaa asetuksia. Preset on olio, joka välitetään käyttävän asetuksen presets-taulukkoon. Toisin kuin asetuksen olion levittäminen spread-syntaksilla, Tailwind yhdistää presetit älykkäästi — teeman laajennukset yhdistetään syvästi, lisäosat ketjutetaan ja sisältötaulukot yhdistetään ilman manuaalista spread-syntaksia.

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

Jaetun UI-paketin sisältöpolut

Monorepon olennainen sudenkuoppa on seuraava: jos käytössänne on jaettu packages/ui-komponenttikirjasto, joka vie ulos Tailwind-luokilla tyyliteltyjä komponentteja, käyttävän sovelluksen on sisällytettävä kyseisen paketin tiedostot omaan content-taulukkoonsa. Muuten JIT-moottori ei käy jaettuja komponentteja läpi, ja niissä käytetyt luokat poistetaan tuotantokoontiversiosta.

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

Workspace-riippuvuuksien määrittäminen

Lisätkää pnpm- tai npm-workspace-monorepossa jaettu asetepaketti kehitysriippuvuudeksi workspace-protokollaa käyttäen. Tämä luo symbolisen linkin paikalliseen pakettiin ilman, että sitä tarvitsee julkaista npm:ään. Käyttävän sovelluksen package.json-tiedostossa on @acme/tailwind-config: workspace:*, ja koontityökalut ratkaisevat sen automaattisesti paikalliseksi paketiksi.

// 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 --workspaces

Turborepon välimuisti Tailwind-koontiversioille

Määrittäkää Turborepo-monorepossa turbo.json-putki välimuistittamaan Tailwind-koontiversioiden tulokset. Koska jaettu asetus on jokaisen sovelluksen koonnin riippuvuus, tiedoston packages/tailwind-config muutokset mitätöivät kaikkien käyttävien sovellusten koontivälimuistin oikein. Näin vanhentunut välimuistissa oleva CSS ei päädy julkaisuun suunnittelujärjestelmän päivittyessä.

// 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 changes

Sisältöpolkujen erojen käsittely

Sisältöpolut ovat ainoa asetus, jota ei voi jakaa — niiden on oltava sovelluskohtaisia. Sovelluksilla on erilaiset hakemistorakenteet. Älkää sijoittako sisältöpolkuja jaettuun asetukseen, vaikka se saattaisi tuntua houkuttelevalta; muuten joitakin tiedostoja ei löydetä tai liian laaja joukko tiedostoja käydään läpi. Jaetun asetuksen tulee viedä ulos vain teema, lisäosat ja presetit. Sisältö määritellään aina paikallisesti jokaisen käyttävän sovelluksen asetuksissa.

// 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'

Jaetun asetuksen versiointi

Vaikka jaettu asetepaketti on yksityinen eikä sitä koskaan julkaista npm:ään, noudattakaa sen versioinnissa kurinalaisuutta. Kasvattakaa sen package.json-tiedoston versiota jokaisen rikkovan muutoksen yhteydessä — esimerkiksi värin poistamisen, tunnisteen uudelleennimeämisen tai lisäosan poistamisen jälkeen. Presetiä käyttävät paketit voivat silloin kiinnittyä tiettyyn versioon ja päivittää sen harkitusti sen sijaan, että rikkovat muutokset siirtyisivät huomaamatta kaikkiin sovelluksiin kerralla.

// 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
  }
}

Jaetun asetuksen muutosten testaaminen

Ennen kuin yhdistätte muutokset jaettuun Tailwind-määritykseen, suorittakaa visuaalinen regressiotesti kaikissa sitä käyttävissä sovelluksissa. Brändivärin muuttaminen tai välistysarvon poistaminen vaikuttaa kaikkiin sovelluksiin samanaikaisesti. Kääntäkää kaikki sovellukset CI-ympäristössä (turbo build) ja suorittakaa kuvakaappausvertailu keskeisillä sivuilla. Käsitelkää määritysten muutoksia sovellusten välisinä rikkovina muutoksina ja ilmoittakaa niistä muutoslokeissa.

# 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=dashboard

Storybook-integraatio monorepoissa

Jos käytätte Storybookia jaetussa UI-paketissa komponenttien dokumentointiin, määrittäkää Storybook käyttämään samaa jaettua Tailwind-esiasetusta. Lisätkää Storybookin Tailwind-lisäosa (@storybook/addon-styling-webpack tai kehyksen vastaava lisäosa) ja osoittakaa se jaettuun määritykseen. Näin komponentit näkyvät Storybookissa samoilla tokeneilla, joita ne käyttävät sovelluksissa.

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

Pikatarkistus

Testatkaa, miten hyvin ymmärrätte tällä oppitunnilla käsitellyt Tailwind CSS Mastery -aiheet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

Tällä oppitunnilla opitte: jaetun Tailwind-määrityspaketin luomisen virallisen esiasetusjärjestelmän avulla älykästä syvää yhdistämistä varten, jaetun UI-paketin tiedostojen sisällyttämisen sisältöpolkuihin luokkien poistamisen estämiseksi sekä määritysten muutosten käsittelemisen sovellusten välisinä rikkovina muutoksina versioinnin ja visuaalisten regressiotestien avulla. Seuraavaksi suunnittelemme capstone-projektia varten täydellisen Tailwind-suunnittelujärjestelmän.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tailwindin skaalaaminen monorepossa” ilmainen?

Kyllä – oppitunnin ”Tailwindin skaalaaminen monorepossa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tailwindin skaalaaminen monorepossa”?

Jakakaa yksi tailwind.config.js useiden monorepon pakettien kesken, käyttäkää presetejä yhteisille tokeneille ja hallitkaa työtilakohtaisia laajennuksia. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Tailwindin skaalaaminen monorepossa”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?

Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Tailwind CSS Academy