Tailwind CSS Academy · Oppitunti

Yhteiselo vanhan CSS:n kanssa

Integroikaa Tailwind olemassa olevaan projektiin, jossa on vanhaa CSS:ää tai toinen framework, hallitkaa spesifisyysristiriidat ja toteuttakaa siirtyminen vaiheittain.

Oppitunti 2/413 vaihetta

Yhteiselo vanhan CSS:n kanssa on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Rinnakkaiselon haaste

Monissa käytännön projekteissa kaikkia olemassa olevia tyylejä ei voi kirjoittaa kerralla uudelleen. Saatatte periä projektin, jossa käytetään Bootstrapia, itse tehtyä CSS-kehystä tai tuhansia rivejä tavallista CSS:ää. Tailwindin lisääminen tällaiseen projektiin tarkoittaa, että molempien järjestelmien on toimittava rinnakkain rikkomatta toisiaan. Spesifisyyden, luokkien nimien törmäysten ja layerien järjestyksen ymmärtäminen on olennaista sujuvan vaiheittaisen siirtymän kannalta.

CSS-spesifisyyden ristiriitojen ymmärtäminen

Tailwindin utiliteetit käyttävät yhden luokan valitsimia, joiden spesifisyys on 0,1,0. Vanhassa CSS:ssä käytetään usein jälkeläisvalitsimia, kuten .header .nav a, joiden spesifisyys on suurempi. Kun molemmat tyylit kohdistuvat samaan elementtiin, suuremman spesifisyyden omaava vanha sääntö voittaa lähdejärjestyksestä riippumatta. Tämän vuoksi Tailwindin utiliteetti, kuten text-blue-600, saattaa vaikuttaa toimimattomalta, jos vanha jälkeläissääntö ohittaa sen.

/* Legacy CSS — specificity 0,2,1 */
.header .nav a {
  color: #333333;
}

/* Tailwind utility — specificity 0,1,0 */
/* .text-blue-600 { color: #2563eb; } */

<!-- This Tailwind class LOSES because legacy has higher specificity -->
<header class="header">
  <nav class="nav">
    <a class="text-blue-600">Will still be #333333</a>
  </nav>
</header>

Spesifisyyden hallinta @layer-direktiivillä

Tailwindin @layer-direktiivi sijoittaa säännöt CSS Cascade Layers -kerroksiin. @layer base- ja @layer utilities -kerrosten tyyleillä on pienempi prioriteetti kuin layerien ulkopuolisilla vanhoilla tyyleillä, vaikka utiliteetin spesifisyys olisi sama. Tämä tarkoittaa, että vanhat tyylit voittavat luonnostaan ilman !important-määrettä. Toisaalta @layer utilities -direktiivin avulla lisätyt uudet Tailwind-utiliteetit eivät vahingossa riko olemassa olevaa CSS:ää.

/*
  Order of precedence (highest to lowest):
  1. !important declarations
  2. Unlayered styles (legacy CSS)
  3. @layer utilities
  4. @layer components
  5. @layer base

  Legacy CSS in a separate file wins by default over Tailwind layers.
*/

/* legacy.css — unlayered, wins over Tailwind layers */
.btn { background-color: navy; }

/* tailwind output — in @layer components, loses to legacy */
/* @layer components { .btn { ... } } */

Tailwindin tuominen vanhan CSS:n rinnalle

Tuokaa sekä Tailwind että vanha CSS oikeassa järjestyksessä. Tuokaa pääasiallisessa sisääntulotiedostossa ensin Tailwindin tuloste PostCSS:n kautta ja sen jälkeen vanha CSS. Tällöin vanhat tyylit määritellään tyylitiedostossa Tailwindin tulosteen jälkeen, joten ne saavat saman spesifisyyden tilanteissa etusijan. Älkää koskaan tuoko vanhaa CSS:ää ennen Tailwindiä, ellette halua Tailwindin ohittavan sitä.

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import legacy styles AFTER Tailwind so they can override when needed */
@import './legacy/reset.css';
@import './legacy/typography.css';
@import './legacy/components.css';

/* New component styles using @apply where needed */
@import './components.css';

Luokkien nimien törmäysten välttäminen

Tailwindin utiliteettien nimet ovat harvoin ristiriidassa tyypillisten vanhojen luokkien nimien kanssa, mutta törmäyksiä voi tapahtua. Yleinen esimerkki on vanha .container-luokka, joka on ristiriidassa Tailwindin .container-utiliteetin kanssa. Etuliitteen käyttö on virallinen ratkaisu — lisätkää etuliite tiedostossa tailwind.config.js, jolloin kaikista Tailwindin luokista tulee esimerkiksi tw-flex ja tw-bg-blue-500 ja nimien päällekkäisyys vanhojen tyylien kanssa vältetään kokonaan.

// tailwind.config.js
module.exports = {
  prefix: 'tw-',   // All Tailwind classes prefixed with 'tw-'
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
};

<!-- In HTML: use tw- prefix on all Tailwind classes -->
<div class="tw-flex tw-items-center tw-gap-4 tw-bg-blue-500">
  <!-- Legacy classes work normally alongside -->
  <div class="legacy-card header-title tw-text-white">
</div>

Vaiheittainen siirtymästrategia

Siirtäkää komponentit yksi kerrallaan sen sijaan, että yrittäisitte kirjoittaa kaiken kokonaan uudelleen. Valitkaa matalan riskin komponentti — esimerkiksi uusi painike tai tunniste — ja tyylitelkää se kokonaan Tailwindilla. Jättäkää ympäröivä vanha koodi ennalleen. Kun toimintamalli on osoittautunut vakaaksi, korvatkaa vanhat komponentit vähitellen yksi kerrallaan. Näin mahdollisten ongelmien vaikutusalue pysyy rajattuna ja projekti voidaan ottaa käyttöön koko siirron ajan.

<!-- BEFORE: legacy button -->
<button class="btn btn-primary btn-lg">Save</button>

<!-- AFTER: new Tailwind button (legacy .btn class removed) -->
<button class="rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white
              transition hover:bg-blue-700">Save</button>

<!-- DURING MIGRATION: both can coexist temporarily -->
<button class="btn btn-primary tw-ring-2 tw-ring-offset-2">Save</button>

Tailwindin Preflightin poistaminen käytöstä

Tailwindin Preflight (normalize.css-tiedostoon perustuva CSS-nollaus) nollaa selainten oletustyylejä voimakkaasti. Vanhassa projektissa nämä nollaukset voivat rikkoa olemassa olevia tyylejä — esimerkiksi poistaa otsikoiden koot, luettelotyylit ja marginaalit. Voitte poistaa Preflightin käytöstä asetuksissa, jolloin vanhat selainten oletustyylit säilyvät ja voitte silti käyttää kaikkia Tailwindin utility-luokkia.

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,  // Disable the CSS reset
  },
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
};

Tailwindin kohdistaminen valikoivasti

Jos vain osan vanhasta sivusta pitäisi käyttää Tailwindin utility-luokkia, voitte kohdistaa Tailwindin tuottaman CSS:n tiettyyn CSS-valitsimeen. Kääritkää kolme @tailwind-direktiiviä valitsinkohdistukseen PostCSS:n avulla. Kaikki tuotetut utilityt sijoitetaan kyseisen valitsimen alle, joten ne eivät vuoda vanhan sivun muuhun sisältöön. Tämä on mahdollisimman tarkkarajainen integrointitapa.

/* Using postcss-scopify or similar — scope Tailwind to .tw-scope */
.tw-scope {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

<!-- In HTML: only elements inside .tw-scope use Tailwind -->
<div class="tw-scope">
  <div class="flex items-center gap-4 bg-blue-500">
    <!-- Tailwind works here -->
  </div>
</div>

<!-- Outside .tw-scope: legacy CSS only -->
<div class="old-header"><!-- legacy --></div>

Testaaminen jokaisen siirtovaiheen jälkeen

Suorittakaa jokaisen komponentin siirtämisen jälkeen visuaalinen regressiotesti varmistaaksenne, ettei mikään rikkoutunut. Selainpohjaiset työkalut, kuten Playwrightin kuvakaappausvertailu tai Chromatic, havaitsevat tahattomat tyylimuutokset automaattisesti. Tarkistakaa vähintään siirretty komponentti manuaalisesti kaikissa tuetuissa selaimissa ja keskeisissä taittopisteissä ennen seuraavaan siirtokohteeseen siirtymistä. Automaattisesta testauksesta on paljon hyötyä pitkän siirron aikana.

// Playwright visual regression example
import { test, expect } from '@playwright/test';

test('button renders correctly', async ({ page }) => {
  await page.goto('/components/button');
  await expect(page.locator('.btn-primary')).toHaveScreenshot('button.png');
});

// Run comparison:
npx playwright test --update-snapshots  // First run: capture baseline
npx playwright test                     // Subsequent: compare

Vanhan CSS:n turvallinen poistaminen

Kun komponentti on siirretty kokonaan Tailwindiin, poistakaa vanhat CSS-säännöt. Tunnistakaa selaimen DevToolsin Coverage-välilehden avulla CSS-säännöt, joita ei kyseisellä sivulla käytetä lainkaan — tämä on vahva merkki siitä, että säännöt ovat tarpeettomia. PurgeCSS voi myös ilmoittaa, mitkä vanhan tiedoston valitsimet eivät koskaan osuneet mihinkään sisältöön, mikä auttaa poistamaan tarpeettoman CSS:n turvallisesti.

# Check CSS coverage in Chrome DevTools:
# 1. Open DevTools > Coverage tab (Ctrl+Shift+P → 'Show Coverage')
# 2. Start recording, interact with the page
# 3. Red bars indicate unused CSS rules — safe to delete if confirmed

# PurgeCSS analysis:
npx purgecss --css legacy.css --content 'src/**/*.html'
# Rules absent from the output were matched — keep
# Rules still in output were never matched — remove candidates

Siirron etenemisestä viestiminen

Seuratkaa siirron etenemistä näkyvästi tiimiprojekteissa. Yksinkertainen taulukko tai projektitaulu, jossa jokainen komponentti on listattu tiloineen (Ei aloitettu, Työn alla, Siirretty, Vanha koodi poistettu), auttaa tiimiä koordinoimaan työtä. Dokumentoikaa edelleen käytössä olevat vanhat luokat ja merkitkää ne kommentilla myöhemmin poistettaviksi, jotta niitä ei vahingossa oteta uudelleen käyttöön tai käytetä uusien ominaisuuksien perustana.

/* MIGRATION STATUS: IN PROGRESS
   Component: .header-nav
   Tailwind replacement: planned in Sprint 12
   Owner: @alice
   Note: Used in _header.html and email-template.html
*/
.header-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

Pikatarkistus

Testatkaa, miten hyvin ymmärrätte tämän oppitunnin Tailwind CSS Mastery -aiheet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

Tässä oppitunnissa opitte: Tailwindin ja vanhan CSS:n välisten spesifisyysristiriitojen hallintaa cascade layer -kerrosten avulla, Preflightin poistamisen käytöstä ja etuliitteen lisäämisen olemassa olevien tyylien rikkoutumisen tai yhteentörmäysten välttämiseksi sekä komponenttien vaiheittaisen siirtämisen visuaalisten regressiotestien ja seurattavan etenemisen avulla. Seuraavaksi tutustumme CSS Modules -ratkaisuun yhdistettynä Tailwindiin.

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 ”Yhteiselo vanhan CSS:n kanssa” ilmainen?

Kyllä – oppitunnin ”Yhteiselo vanhan CSS:n kanssa” 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 ”Yhteiselo vanhan CSS:n kanssa”?

Integroikaa Tailwind olemassa olevaan projektiin, jossa on vanhaa CSS:ää tai toinen framework, hallitkaa spesifisyysristiriidat ja toteuttakaa siirtyminen vaiheittain. 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 2/4.

Kuinka kauan ”Yhteiselo vanhan CSS:n kanssa”-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