Home-theater-designers
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.
PÄIVÄN VIDEON TEKEMINEN
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:
D4CC874C158D9005DBCB6474723F8993EDC9E47Nä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 :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
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 components;
@tailwind utilities;
Suorita rakennusprosessi
Suorita nyt terminaalissa CLI-työkalu seuraavalla komennolla:
miten soittajan tunnusta ei tehdä
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:
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello 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.