Next.js 15 -täyden pinon verkkosovellukset · Oppitunti

Tailwind CSS:n käyttöönotto

Ottakaa Tailwind CSS käyttöön ja hyödyntäkää sitä nopeassa käyttöliittymäkehityksessä utility-first-luokkien avulla.

Oppitunti 2/411 vaihetta

Tailwind CSS:n käyttöönotto on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Tutustukaa Tailwind CSS:ään

Tervetuloa tyylittelemään Tailwind CSS:n avulla! Se on suosittu utility-first-tyylinen CSS-kehys, jonka avulla voitte rakentaa mukautettuja ulkoasuja nopeasti.

Sen sijaan, että kirjoittaisitte mukautettua CSS:ää jokaiselle elementille, käytätte ennalta määritettyjä utility-luokkia suoraan HTML- tai JSX-koodissa.

Utility-first-tyylin selitys

Mitä utility-first tarkoittaa?

Pienet, yhteen tarkoitukseen suunnitellut luokat: Kukin luokka tekee yhden asian, kuten text-blue-500 tekstin värille tai p-4 täytteelle.
Monimutkaisten käyttöliittymien rakentaminen: Yhdistätte useita pieniä utility-luokkia yksilöllisten ulkoasujen luomiseksi.
Mukautettua CSS:ää ei tarvita: Usein teidän ei tarvitse kirjoittaa lainkaan mukautettuja CSS-tiedostoja, mikä nopeuttaa kehitystä.

Tailwind ja Next.js: täydellinen yhdistelmä

Tailwind CSS sopii erinomaisesti yhteen Next.js:n kanssa:

Komponenttipohjaisuus: Voitte käyttää luokkia helposti suoraan React-komponenteissa.
Ei ajonaikaista kuormaa: Tailwind luo staattisen CSS:n koontivaiheessa, joten selaimelle ei toimiteta tyylittelyä varten ylimääräistä JavaScriptiä.
Käyttämättömien tyylien poistaminen: Tailwind poistaa käyttämättömän CSS:n automaattisesti, joten lopullisen paketin koko pysyy pienenä.

Vaihe 1: Asenna keskeiset riippuvuudet

Lisätään ensin Tailwind CSS ja sen vertaisriippuvuudet Next.js-projektiinne. Asennamme ne kehitysriippuvuuksina.

tailwindcss: Keskeinen kehys.
postcss: Työkalu CSS:n muuntamiseen.
autoprefixer: PostCSS-laajennus, joka lisää toimittajakohtaiset etuliitteet CSS-sääntöihin.

npm install -D tailwindcss postcss autoprefixer

Vaihe 2: Alusta Tailwind-määritykset

Luodaan seuraavaksi Tailwind-määritystiedostot. Lippu -p luo puolestanne sekä tiedoston tailwind.config.js että tiedoston postcss.config.js.

npx tailwindcss init -p

Vaihe 3: Määritä sisältöpolut

Avatkaa tailwind.config.js. Teidän on kerrottava Tailwindille, mistä se löytää tiedostot, kuten sivut ja komponentit, joissa Tailwind-luokkia käytetään. Näin se voi käydä tiedostot läpi ja luoda vain tarvittavan CSS:n.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Vaihe 4: Lisää Tailwind-direktiivit CSS:ään

Avatkaa nyt globaali CSS-tiedostonne, yleensä ./app/globals.css App Routerissa. Lisätkää @tailwind-direktiivit alkuun. Ne tuovat Tailwindin perustyylit, komponentit ja utility-luokat projektiinne.

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom global styles can go here */

Utility-luokkien käyttäminen JSX:ssä

Kun Tailwind on määritetty, voitte alkaa käyttää luokkia suoraan elementeissänne. Huomatkaa, kuinka useat luokat yhdessä tyylittelevät h1-elementin tässä esimerkissä.

// app/page.js or a component file

export default function HomePage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-indigo-600 p-6 rounded-lg shadow-md bg-white">
        Hello Tailwind!
      </h1>
    </div>
  );
}

Responsiivinen suunnittelu helposti

Tailwind käyttää responsiiviseen suunnitteluun mobile-first-lähestymistapaa. Voitte käyttää eri tyylejä eri katkaisupisteissä etuliitteillä, kuten sm:, md: ja lg:.

p-4: Oletustäyte (pienet näytöt).
md:p-8: Täyte keskikokoisille näytöille ja sitä suuremmille näytöille.
lg:p-12: Täyte suurille näytöille ja sitä suuremmille näytöille.

// app/page.js or a component file

export default function ResponsivePage() {
  return (
    <div className="p-4 md:p-8 lg:p-12 bg-blue-100 md:bg-green-100 lg:bg-purple-100">
      <p className="text-base md:text-lg lg:text-xl font-medium">
        Watch me change on different screen sizes!
      </p>
    </div>
  );
}

Tailwind-integraation tarkistus

Olette oppineet keskeiset vaiheet Tailwind CSS:n integroimiseksi Next.js-projektiinne. Testataan seuraavaksi ymmärrystänne!

Vastaa interaktiivisessa oppitunnissa

Kertaus: tyylittely Tailwindilla

Onnittelut! Olette oppineet integroimaan Tailwind CSS:n Next.js-sovellukseenne.

Asennus: Lisäsitte Tailwindin ja PostCSS:n riippuvuudet.
Määritykset: Alustitte ja määrititte tailwind.config.js-tiedoston tiedostojenne läpikäyntiä varten.
Integrointi: Sisällytitte Tailwindin perustyylit globaaliin CSS:ään.
Käyttö: Aloititte komponenttien tyylittelyn utility-luokilla ja opitte ymmärtämään responsiivista suunnittelua.

Tailwind CSS auttaa rakentamaan kauniita ja responsiivisia käyttöliittymiä nopeasti yhdenmukaisen suunnittelujärjestelmän avulla.

Aloita maksutta

Opi TypeScript 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: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tailwind CSS:n käyttöönotto” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “Tailwind CSS:n käyttöönotto”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tailwind CSS:n käyttöönotto”?

Ottakaa Tailwind CSS käyttöön ja hyödyntäkää sitä nopeassa käyttöliittymäkehityksessä utility-first-luokkien avulla. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Tailwind CSS:n käyttöönotto”-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ä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?

Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-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

CSS-moduulit ja globaalit tyylit
Tailwind CSS:n käyttöönotto
Komponenttikirjastot ja teemoitus
Responsiivinen suunnittelu ja tumma tila

← Takaisin: Next.js 15 -täyden pinon verkkosovellukset