Tailwind CSS on apuohjelman ensimmäinen CSS-kehys, jonka avulla kehittäjät voivat suunnitella mukautettuja verkkokomponentteja vaihtamatta CSS-tiedostoon. Tässä opetusohjelmassa opit asentamaan Tailwind CSS: n Reactiin ja kuinka voit käyttää sitä yksinkertaisen React-sivun rakentamiseen.

Miksi käyttää Tailwind CSS: ää?

Niitä on jo paljon CSS kehyksiä, jotka yksinkertaistavat kuinka kehittäjät suunnittelevat verkkosivuja. Joten miksi sinun pitäisi käyttää Tailwind CSS: ää?

CSS-kehykset, kuten Bootstrap ja Foundation, ovat mielipiteitä sisältäviä kehyksiä, mikä tarkoittaa, että ne tarjoavat kehittäjille ennalta määritettyjä komponentteja, joilla on oletustyylit. Tämä rajoittaa sekä räätälöintiä että luovuutta, ja päädyt verkkosivustoihin, jotka näyttävät melko yleisiltä.

Tailwind CSS, on kuitenkin apuohjelma-ensimmäinen kehys, joka antaa sinulle luovan hallinnan dynaamisten komponenttien luomiseen. Ja toisin kuin Bootstrapissa, voit helposti muokata malleja haluamallasi tavalla.

Toinen Tailwind CSS: n käytön etu on, että CSS-paketin koko on pieni, koska se poistaa kaikki käyttämätön CSS rakennusprosessin aikana (joka eroaa Bootstrapista, koska se sisältää kaikki CSS-tiedostot rakentaa).

Lisätietoja aiheesta Erot Tailwind CSS: n ja Bootstrapin välillä aihetta käsittelevästä artikkelistamme.

Tailwind CSS: n käytön haitat

Tailwind CSS: llä on jyrkkä oppimiskäyrä jopa kokeneille kehittäjille. Kestää jonkin aikaa oppia käyttämään hyödyllisyysluokkia täysimääräisesti, ja sinun on ehkä viitattava dokumentaatioon usein. Kuitenkin, kun olet tutustunut luokkiin, huomaat sen helpommaksi ja nopeammaksi kuin tavallinen CSS.

Useimmat kehittäjät haluavat noudattaa huolenaiheiden erotteluperiaatetta siten, että CSS- ja HTML-tiedostot kirjoitetaan eri tiedostoihin. Tailwind CSS: n avulla kirjoitat CSS: n suoraan HTML-merkintään, mikä on joillekin haittapuoli.

Näistä haitoista huolimatta Tailwind CSS on kehys, jota sinun tulee harkita vakavasti, jos olet jo tyytyväinen CSS: ään ja haluat rakentaa malleja nopeammin.

Aloitus: Luo React-projekti

Suorita seuraava komento terminaalissa rakennustelineen a Reagoi sovellus käyttää luo-reagoi-sovellus.

npx create-react-app react-tailwind

luo-reagoi-sovellus tarjoaa helpon tavan luoda React-sovellus ilman rakennustyökalujen, kuten webpack-, babel- tai lintereiden, määrittämistä. Tämä tarkoittaa, että pääset toimivaan React-ympäristöön muutamassa minuutissa.

Yllä oleva komento luo uuden kansion nimeltä reagoi - myötätuuli. Siirry kansioon ja avaa se haluamallasi tekstieditorilla.

cd react-tailwind

Asenna seuraavaksi Tailwind CSS ja määritä se toimimaan React-sovelluksen kanssa.

Käytä Tailwind CSS: ää Reactissa

Asenna Tailwind CSS ja sen riippuvuudet tällä komennolla:

npm asenna tailwindcss postcss automaattinen prefixer

PostCSS käyttää JavaScript-laajennuksia tehdäkseen CSS: stä yhteensopivan useimpien selainten kanssa. Se tarkistaa selaimen, jossa sovellus toimii, ja määrittää monitäytteet, joita tarvitaan, jotta CSS toimii saumattomasti. Autoprefixer on PostCSS-laajennus, joka käyttää arvoja kohteesta caniuse.com lisätä automaattisesti toimittajan etuliitteet CSS-sääntöihin.

Alusta Tailwind CSS

Suorita myötätuuli init -komento luoda Tailwind CSS -oletusasetustiedostot.

npx tailwindcss init

Tämä luo tailwind.config.js juurikansiossa, joka tallentaa kaikki Tailwindin määritystiedostot ja sisältää seuraavat tiedot:

module.exports = {
 sisältö: [],
 teema: {
 laajentaa: {},
 },
 laajennukset: [],
}

Määritä mallin polut

Sinun on kerrottava Tailwind CSS: lle tiedostot, jotka sen tulee tarkistaa nähdäkseen, mitä CSS-luokkia käytetään. Tämän ansiosta Tailwind voi tunnistaa ja poistaa käyttämättömät luokat, mikä pienentää luodun CSS: n kokoa.

Sisään tailwind.config.js, lisää mallipolut sisältöavaimen alle.

module.exports = {
 sisältö: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 teema: {
 laajentaa: {},
 },
 laajennukset: [],
}

Lisää Tailwind CSS Reactiin

Seuraava askel on sisällyttää Tailwind CSS sovellukseen käyttämällä @tailtuuli direktiivit.

Poista kaikki index.css ja lisää seuraavat perustyylit, komponentit ja apuohjelmat tuomiseksi.

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

Lopuksi varmista index.css tuodaan sisään index.js ja Tailwind CSS ovat käyttövalmis.

Tailwind CSS: n käyttäminen React-komponentin tyylin luomiseen

Luot alla olevan yksinkertaisen web-sivun ja muotoilet sen käyttämällä Tailwindin hyödyllisyysluokkia.

Tämä sivu sisältää kaksi pääosiota: a navigointipalkki, ja sankariosio (jossa on otsikko ja painike).

Havainnollistaaksesi, kuinka Tailwind CSS tekee CSS: n kirjoittamisesta helpompaa, kokeile muotoilla web-sivu käyttämällä tavallista CSS: ää ja Tailwind CSS: ää.

Aloita muokkaamalla App.js in src kansio poistaaksesi tarpeettoman koodin.

tuo './App.css'
function App() {
 paluu (



 );
}
Vie oletussovellus;

Lisää seuraavaksi verkkosivun sisältö App.js.

tuo "./App.css";
function App() {
 paluu (







 Tailwind CSS helpottaa React-komponenttien muotoilua!



Aloittaa






 );
}

Jos haluat käyttää tavallista CSS: ää, lisää CSS kohteeseen App.css.

nav {
 näyttö: flex;
 perustella-sisältö: välilyönti;
 täyte: 16px 36px;
 väri: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 fonttikoko: 18px;
 fontin paino: lihavoitu;
}
ul {
 listatyyli: ei mitään;
 näyttö: inline-flex;
}
ul li {
 marginaali vasen: 16px;
 kohdistin: osoitin;
}
.sankari {
 näyttö: flex;
 flex-suunta: pylväs;
 kohdista kohteet: keskellä;
 marginaali yläreuna: 64px;
}
h1 {
 fonttikoko: 36px;
 tekstin tasaus: keskellä;
}
.btn {
 taustaväri: #000000;
 väri: #fff;
 täyte: 10px;
 leveys: sovi-sisältö;
 marginaali yläreuna: 36px;
}

Tailwind CSS: n avulla sinun ei tarvitse kirjoittaa CSS-sääntöjä jokaiselle luokalle. Sen sijaan käytät hyödyllisyysluokkia. Nämä ovat luokkia, jotka on rajattu yhteen CSS-ominaisuuteen. Jos esimerkiksi haluat luoda painikkeen, jossa on musta tausta ja valkoinen tekstiväri, sinun on käytettävä bg-musta ja teksti-valkoinen käyttöluokat.

App.js pitäisi näyttää tältä.

function App() {
 paluu (







 Tailwind CSS helpottaa React-komponenttien muotoilua!




 Aloittaa







 );
}

Sinun ei tarvitse tuoda App.css koska Tailwind CSS: n luomat tyylit on tallennettu index.css johon toit index.js aikaisemmin.

Tavalliseen CSS: ään verrattuna tämä lähestymistapa johtaa vähemmän helposti ymmärrettävään koodiin.

Koodi tyylillä Tailwind CSS: n kanssa

Tässä artikkelissa opit Tailwind CSS: stä, sen vahvuuksista, haitoista ja kuinka voit käyttää sen hyödyllisyysluokkia React-sovelluksissa. Luokkien lisäksi Tailwind CSS tarjoaa myös muita lisäominaisuuksia, kuten mahdollisuuden luoda reagoivia asetteluja ja uudelleenkäytettäviä komponentteja.

Mutta kuten aiemmin mainitsimme, Tailwind ei ole kaukana ainoasta CSS-kehyksestä markkinoilla. Mitä aiot käyttää seuraavassa projektissasi?

Tailwind CSS vs. Bootstrap: kumpi on parempi kehys?

CSS-kehystä valittaessa on tärkeää löytää tarpeitasi vastaava.

Lue Seuraava

Kirjailijasta