Jos haluat muotoilla sovelluksiasi nopealla, joustavalla ja luotettavalla kehyksellä, Tailwind CSS on loistava vaihtoehto. Tailwind on CSS-kehys, jonka avulla voit suunnitella mukautettuja verkkokomponentteja. Voit suunnitella komponentteja ilman, että sinun tarvitsee vaihtaa edestakaisin HTML- ja CSS-tiedostojen välillä.

Toisin kuin Bootstrap, Tailwindillä ei ole ennalta määritettyjä luokkia. Sen sijaan voit muokata omiasi. Tailwindin avulla voit rakentaa monimutkaisia ​​komponentteja primitiivisillä apuohjelmilla, funktioilla ja ohjeilla.

Opi asentamaan ja käyttämään Tailwindia upeiden käyttöliittymien luomiseen Next.js-projekteissasi.

Asenna Tailwind CSS Next.js: ään

Aloita asentamalla Tailwind Next.js-sovellukseen. Prosessi on samanlainen kuin Tailwindin asentaminen React-sovellukseen, jossa on pieni ero konfigurointiprosessissa.

Siirry kohtaan Tailwind CSS asennus sivu. Siirry sitten kohtaan

Puiteoppaat osio ja valitse Next.js. Tämä osio sisältää kaikki ohjeet, joita tarvitset Tailwindin määrittämiseen Next.js-projektissasi.

Asenna Tailwind kautta npm, JavaScript-pakettien hallinta, suorita nämä kaksi päätekomentoa:

npm install -D tailwindcss postcss automaattinen prefixer
npx tailwindcss init -p

Nämä komennot luovat kaksi konfiguraatiotiedostoa nimeltä tailwind.config.js ja postcss.config.js juuriprojektikansiossa. Nämä tiedostot osoittavat, että TailwindCSS: n asennus onnistui. Voit myös asentaa Tailwind CSS: n Tailwind CLI: n kautta tai PostCSS-laajennuksena.

Määritä mallit

Asennuksen jälkeen sinun on määritettävä sovelluksen määritystiedostosi asennusoppaassa mainitut mallipolut. Lisää seuraava koodi tailwind.config.js-tiedosto:

/** @tyyppi {import('tailwindcss').Config}*/
moduuli.exports = {
 sisältö: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Tai jos käytät src-hakemistoa: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 teema: { 
 laajentaa: {},
 },
 laajennukset: [],
}

Lisää Tailwind-direktiivi sovellukseen

Lisää seuraavaksi seuraavat Tailwind-ohjeet sovelluksesi CSS-tiedostoon. Tämä on tiedosto nimeltä global.css. Poista global.css-tiedoston sisältö ja lisää Tailwind-ohjeet.

@tailwind base;
@tailwind komponentit;
@tailwind apuohjelmat;

Suorita rakennusprosessi

Suorita nyt terminaalissa CLI-työkalu seuraavalla komennolla:

npm run dev

Tämä komento etsii mallitiedostoistasi luokkia ja rakentaa CSS: n. Se avaa portin, josta voit tarkastella selainta.

Jos nyt navigoit palvelimelle osoitteessa http://localhost: 3000 näet sovelluksesi. Sinun pitäisi huomata pieni muutos sisällössä. Tämä osoittaa, että asennusprosessi on onnistunut ja Tailwind CSS on käytössä.

Käytä Tailwindia projektissa

Seuraavaksi testataan Tailwind CSS -ominaisuuksia soveltamalla luokkia projektiisi. Sinulla on esimerkiksi sovellus, jossa on teksti "Hei Tailwind". Haluat antaa sille punaisen värin vaaleansinisellä taustalla.

Luo Home.tsx tiedosto ja lisää seuraava koodi:

viedäoletuksenatoimintoKoti() {
palata (
"bg-blue-300">
"text-red-900">Hei Tailwind CSS</h1>
 </body>
 );
} 

Nyt kun siirryt selaimeen, näet tekstin muuttuneen punaiseksi ja tausta on sininen.

Voit tutkia muita Tailwind CSS -ominaisuuksia muokataksesi sovelluksesi muita komponentteja. Ehdollisten muokkaajien avulla voit luoda reaktiivisia tiloja, kuten hiiri ja tarkennus. Voit myös mukauttaa sivusi tummiin ja vaaleisiin tiloihin käyttäjän mieltymysten mukaan.

Tailwind CSS: n käytön edut

Adam Wathanin vuonna 2017 tekemä Tailwind CSS eroaa muista CSS-kirjastoista monin tavoin. Sen käyttöaika on nolla, mikä tekee siitä salamannopean. Ja on helppo asentaa. Tailwind etsii sovelluksesi kaikki HTML-tiedostot ja JavaScript-komponentit luokkanimien varalta. Sitten se luo vastaavat tyylit, jotka suunnittelevat elementit.

Tailwind CSS: n avulla voit suunnitella monimutkaisia ​​komponentteja primitiivisistä apuohjelmista. Voit käyttää tyylejä uudelleen eri osissa ja muokata reagoivia käyttöliittymiä muokkaamalla muokkaajia. Tässä olevien ohjeiden avulla opit asentamaan ja käyttämään Tailwind CSS: ää brändiäsi vastaavien sovellusten mukauttamiseen.