Les fulles d'estil són documents formats per un conjunt d'estils que descriuen la presentació dels documents HTML.
Introducció
Un document “css” té extensió css i el poden utilitzar molts documents web a la vegada.
D’aquesta manera, en lloc de tenir un bloc <style> repetit dins de cada document HTML, el pots tenir en un document a part compartit per tots els documents HTML que l’enllacin.
Entorn de treball
The simplest and fastest way to get up and running with Tailwind from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable
Instal·la tailwindcss amb Windows - Scoop
Crea la carpeta document-layout
mkdir document-layoutcd document-layoutAfegeix la importació @import "tailwindcss"; al teu fitxer CSS principal.
@import "tailwindcss";A continuació executa l’eina CLI que escaneja els teus fitxers html, i a partir del fitxer main.css construeix un fitxer public/main.css personalitzat.
tailwindcss -i ./main.css -o ./public/main.css --watchCrea el fitxer index.html a la carpeta public:
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./main.css" rel="stylesheet"></head><body> <h1 class="text-3xl text-red-500 font-bold underline"> Hello world! </h1> <p>Helo World</p></body></html>Pots veure que en el <head> has afegit un <link> de tipus stylesheet a l’URL ./main.css.
El navegador, en carregar el document web, segueix l’enllaç i processa la fulla d’estil.
Si mires el contingut del fitxer main.css pots veure que tailwindcss ha generat el CSS necessari per a la fulla d’estil.
Tailwind només afegeix les classes utilitzades als documents HTML, creant el CSS més petit possible!
Estils propis
Afegeix el document HTML el-poble.html a la carpeta public:
<!doctype html><html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./main.css" rel="stylesheet"></head>
<body> <h1>El poble</h1> <div class="author">Miquel Martí i Pol</div> <div class="poem"> <div> <div>El poble és un vell tossut,</div> <div>és una noia que no té promès,</div> <div>és un petit comerciant en descrèdit,</div> </div> <div> <div>El poble és una xafogosa tarda d'estiu,</div> <div>és un paperet damunt la sorra,</div> <div>és la pluja fina de novembre.</div> </div> </div></body>
</html>A continuació afegeix els teus propis estils al fitxer main.css.
@import "tailwindcss";
.poem { @apply ml-4 border-l-2 border-orange-400 pl-2;}.poem > div { @apply my-4 pl-4 border-l-2 border-gray-300;}Recorda que cada cop que actualitzes el fitxer main.css has de refrescar el navegador per tal que torni a carregar la fulla d’estil.
Completa els estils per a l’autor i el títol del poema.
Afegeix un altre document HTML amb el poema que tu vulguis, i l’enllaç al la fulla d’estil main.css.
@layer
La directiva @apply et permet utilitzar classes de Tailwind en la definició de selectors CSS.
La directiva @layer pot ser base, components o utilities. Pel que fa al navegador, si utilitzes @layer, els selectors es defineixen com a part de la capa que declaris, independentment d’on estiguin ubicades realment les definicions dins dels teus fitxers CSS.
Fer servir @layer components defineix el selector com a part dels components i abans de les utilities. Això vol dir que, si combinem una definició nostra amb una utilitat de Tailwind, guanyarà la utilitat, que és el que volem. Així, podem definir, per exemple, un títol extra gran amb:
@layer components { .title { @apply text-6xl font-bold } .subtitle { @apply text-4xl font-semibold } .subsubtitle { @apply text-lg font-medium italic }}<div class="title text-5xl">Title</div>Per entendre per què @layer és important, cal conèixer un principi general del CSS: a igualtat de condicions, si dues classes CSS intenten ajustar la mateixa propietat subjacent, preval la que està definida més tard. (Si ja estàs familiaritzat amb el CSS, saps que també hi ha el principi d’especificitat, on guanya la definició més específica, però com que totes les utilitats de Tailwind tenen la mateixa especificitat, això no és un problema aquí.)
En un fitxer CSS, si tens dues definicions per al mateix selector que defineixen la mateixa propietat, guanya el selector definit més tard al fitxer. En Tailwind, si tens dues classes utilitàries que defineixen la mateixa propietat, guanya la que apareix més endavant a la llista; per tant, class="text-xl text-2xl" donarà un text amb mida 2xl.
En definir un selector personalitzat dins d’una capa, el selector es carrega al final d’aquella capa i abans de la següent. Això té conseqüències sobre com el teu CSS personalitzat pot interactuar amb altres utilities de Tailwind o amb altres CSS. Per exemple, podem fer que les nostres definicions formin part de l’HTML utilitzant @apply sobre etiquetes, no sobre selectors de classe. En aquest cas, posem la definició a la capa base:
@layer base { h1 { @apply text-4xl font-bold } h2 { @apply text-2xl font-semibold } h3 { @apply text-lg font-medium italic }}Aquí redefinim directament els elements h1, h2 i h3, de manera que podem fer servir això:
<h1>Title</h1>En estar a la capa base, aquestes definicions van abans de totes les utilities, de manera que <h1 class="text-6xl"> es comporta com esperes, amb la 6xl tenint prioritat. Si l’h1 estigués definit a la capa utilities, llavors l’h1 tindria prioritat perquè es definiria més tard que text-6xl. I com que hem mogut la definició a la capa base, Tailwind ho considerarà part dels estils Preflight i ho definirà abans de qualsevol component. De nou, aquesta ubicació et permet barrejar etiquetes, components i utilities tal com s’espera.
By being in the base layer, these definitions are before all utilities, so that <h1 class="text-6xl"> behaves as you’d want, with the 6xl taking precedence. If the h1 was defined in the utilities layer, then the h1 would have precedence because it’d be defined later than the text-6xl. And because we’ve moved the layer to base, Tailwind will consider this part of the Preflight styles and define it before any components. Again, this placement allows you to mix tags, components, and utilities as expected.