* Photo by Ross Parmly
Tailwind CSS je CSS okvir namijenjen brzom kreiranju prilagođenih korisničkih sučelja. Pruža skup predefiniranih CSS klasa koje možete koristiti za brzo stiliziranje HTML elemenata bez pisanja prilagođenog CSS koda.
Možete lako stilizirati HTML elemente kao što su gumbi, obrasci, tipografija i slično, koristeći minimalnu količinu koda. Okvir uključuje širok raspon korisničkih klasa koje pokrivaju većinu uobičajenih potreba za stiliziranjem, što omogućuje brzo i učinkovito slaganje složenih korisnička sučelja. Tailwind CSS pruža skup opcija prilagodbe koje vam omogućuju kontrolu stiliziranja vašeg korisničkog sučelja, uključujući boje, razmake, veličine fonta i još mnogo toga.
Odluka o tome želite li koristiti Tailwind i je li Tailwind.css izvrstan ili totalna katastrofa trebala bi biti individualna, ali u svakom slučaju, vjerojatno će se prije ili poslije dogoditi da ćete ga poželjeti ili morati koristiti. Ovo je jednostavan vodič od par koraka za dodavanje Tailwind CSS-a na vašu web stranicu.
1) Postavljanje razvojnog okružja
Da biste postavili razvojno okruženje, trebat će vam:
- Web preglednik (preporučio bih Chrome, ili Firefox developers izdanje)
- Uređivač koda (npr. VS Code, ili Sublime)
- CLI – Terminal (ako koristite Mac) ili Command Line (ako ste korisnik Windowsa)
- Ažurirana verzija Node.js-a.
Tehnički gledano, mogli biste koristiti CLI iz svog uređivača koda (ako ga ima ugrađeno), ali ja radije koristim Terminal zasebno.
2) Instalacija Tailwind CSS-a
Otvoriti ćemo Terminal i kreirati novu mapu za našu web stranicu – ja ću svoju nazvati, kreativno – tailwind.
mkdir tailwind
Tada ćemo ući u tu mapu:
cd tailwind
Trebamo HTML datoteku u kojoj ćemo pisati naš kod. Zapamtite, Tailwind je CSS okvir prvobitno namijenjen brzom kreiranju korisničkih sučelja, i mi ćemo pisati sav svoj CSS kod u HTML-u.
Ako dodajete Tailwind na postojeću web stranicu, ne trebate ovaj HTML, ali ako krećete od početka, možete koristiti ovaj kostur za svoju HTML stranicu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind CSS tutorial</title>
</head>
<body>
<h1>Hi, I am a Tailwind project</h1>
</body>
</html>
Prije nego što nastavimo, želio bih vam pokazati kako izgleda moja struktura dokumenta, u slučaju da niste sigurni koja bi datoteka kamo trebala ići:
Ok, instalirajmo Tailwind. U Terminalu ćemo napisati:
npm install -D tailwindcss
I kliknuti ENTER. Sada trebamo kreirati Tailwind config dokument:
npx tailwindcss init
I opet ENTER. Ove naredbe su instalirale TAILWIND i kreirale tailwind.config.js dokument.
Sada ćemo otvoriti tailwind.config.js dokument i zamijeniti kod koji je generiran unutra sa sljedećim:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Odlično. Sada nam treba nova radna mapa koju možemo nazvati src:
mkdir src
I novi dokument koji ćemo nazvati input.css:
touch input.css
U input.css ćemo zalijepiti:
@tailwind base; @tailwind components; @tailwind utilities;
Treba nam još jedna radna mapa, u koju ćemo generirati CSS – moja se zove dist:
mkdir dist
Sada ćemo kompilirati Tailwind CSS kod iz /src/input.css u /dist/output.css.
3) Početak procesa izgradnje
Kako bismo upogonili proces izgradnje Tailwind koda, u Terminal ćemo upisati:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Dakle, ono što govorimo je – generiraj CSS iz Tailwind klasa iz input.css dokumenta u output.css te također prati sve promjene napravljene u HTML dokumentu.
4) Dodavanje Tailwinda na web stranicu
Sada kada je sve spremno, moramo još uključiti Tailwind u zaglavlje (<head>) našeg dokumenta, kao što bismo učinili s bilo kojim CSS-om:
<link href="../dist/output.css" rel="stylesheet">
5) Pisanje Tailwind CSS koda
Jedina stvar koja preostaje je početi pisati Tailwind CSS kod. Trebat će vremena da se naviknete na sintaksu, a ovdje je “cheat sheet” – opsežan popis Tailwind klasa koje vam mogu pomoći pri rasporedu grafičkih elemenata na stranici, tj. slaganju layouta.
Evo jednostavnog primjera kako bi to moglo izgledati:
<div class="bg-gray-100 border-gray-200 border-8 p-8 m-24 w-2/6">
<h1 class="text-2xl truncate font-bold">Hi, I am a Tailwind project</h1>
<p class="text-lg truncate truncate mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="text-red-400 block mt-4">Read More</a>
</div>
Ako bacimo oko u output.css, vidjeti ćemo kompilirani CSS kod klasa koje smo pisali u HTML-u:
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.p-8 {
padding: 2rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.leading-3 {
line-height: .75rem;
}
.text-orange-400 {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
I to je to. Ako koristite Tailwind i imate što za dodati, napišite u komentar ispod teksta.
Leave a comment