Medvind CSS
 | |
| Originalförfattare | Adam Wathan, Jonathan Reinink, David Hemphill och Steve Schoger |
|---|---|
| Utvecklare | Tailwind Labs |
| Förvar | |
| Skrivet i | CSS |
| Plattform | webb |
| Tillgänglig i | engelsk |
| Licens | MIT-licens |
| Hemsida | tailwindcss.com |
Tailwind CSS är ett CSS- ramverk med öppen källkod . Huvudfunktionen i detta bibliotek är att det, till skillnad från andra CSS-ramverk som Bootstrap , inte tillhandahåller en serie fördefinierade klasser för element som knappar eller tabeller. Istället skapar den en lista med "hjälpmedel" CSS-klasser som kan användas för att styla varje element genom att mixa och matcha.
Till exempel, i andra traditionella system, skulle det finnas en klassmeddelandevarning som skulle tillämpa en gul bakgrundsfärg och fet text. För att uppnå detta resultat i Tailwind, skulle man behöva tillämpa en uppsättning klasser skapade av biblioteket: bg-yellow-200 och font-bold .
Den 23 januari 2023 har Tailwind CSS över 64 400 stjärnor på GitHub .
Funktioner
På grund av skillnaden i grundläggande koncept i förhållande till andra traditionella CSS-ramverk som Bootstrap, är det viktigt att känna till filosofin från vilken Tailwind skapades, samt dess grundläggande användning.
Verktygsklasser
Utility -first- konceptet hänvisar till den huvudsakliga differentierande egenskapen hos Tailwind. Istället för att skapa klasser kring komponenter (knapp, panel, meny, textruta ...), byggs klasser kring ett specifikt stilelement (gul färg, fet stil, mycket stor text, mittelement...). Var och en av dessa klasser kallas nyttoklasser .
Det finns många verktygsklasser i TailwindCSS som gör det möjligt att kontrollera ett stort antal CSS -egenskaper som färger, ram, visningstyp ( display ), teckenstorlek och teckensnitt, layout, skugga...
| Resultat |
|
|
|---|---|---|
| Koda |
< div class = "m-4 p-4 bg-yellow-200 font-bold rounded-lg" > < p > Var försiktig när du matar fåglarna. </ p > </ div >
|
|
| Klasser | Medvind | CSS motsvarande |
m-4
|
marginal : 1rem ;
|
|
p-4
|
stoppning : 1rem ;
|
|
bg-gul-200
|
bakgrundsfärg : rgba ( 229 , 231 , 235 , 1 );
|
|
teckensnitt med fet stil
|
font-weight : 700 ;
|
|
rundad-lg
|
0 gränsradie : . 5 rem ;
|
|
Varianter
Tailwind erbjuder möjligheten att tillämpa en verktygsklass endast i vissa situationer genom mediefrågor , vilket kallas en variant. Den huvudsakliga användningen av varianter är att designa ett responsivt gränssnitt för olika skärmstorlekar. Det finns också varianter för de olika tillstånden som ett element kan ha, såsom hovring : för när det svävar, fokus: när tangentbordet är valt eller aktivt: när det används eller när webbläsaren eller operativsystemet har mörkt läge aktiverat.
Varianter har två delar: villkoret som ska uppfyllas och klassen som tillämpas om villkoret är uppfyllt. Till exempel kommer varianten md:bg-yellow-400 att tillämpa klassen bg-yellow-400 om skärmstorleken är större än värdet definierat för md .
Tailwind CSS är utvecklad med JavaScript , körs via Node.js och installeras med miljöpakethanterare som npm eller yarn .
Inställningar och teman
Det är möjligt att konfigurera de verktygsklasser och varianter som Tailwind erbjuder genom en konfigurationsfil som vanligtvis heter tailwind.config.js . I konfigurationen kan man ställa in värdena för verktygsklasserna, såsom färgpaletten eller storlekarna mellan element för marginaler.
Bygg allt och rensa
Standardläget för Tailwind är att systemet genererar alla möjliga CSS-kombinationer baserat på projektinställningarna. Sedan, med hjälp av ett annat verktyg som PurgeCSS, korsas alla filer och klasserna som inte används tas bort från den resulterande CSS-filen.
På grund av antalet klasser som kan genereras av antalet varianter och deras kombinationer, har denna metod nackdelarna med långa väntetider och stora storlekar på CSS-filer innan de rensas. Detta driftläge är inte längre tillgängligt i version 3 av Tailwind CSS.
JIT
JIT-läge ( Just-In-Time ) är ett alternativt sätt att generera CSS som istället för att generera alla möjliga klasser och sedan ta bort alla de som inte används, analyserar innehållet i HTML-filer (eller konfigurerade tillägg eller platser) och genererar omedelbart bara de klasser som behövs och används.
Eftersom alla möjliga variabler inte längre genereras, minskar väntetiden och storleken på de resulterande CSS-filerna avsevärt. [ citat behövs ] Denna tekniska förbättring har gjort det möjligt att introducera många nya varianter och nyttoklasser, såväl som möjligheten att skapa nyttoklasser i farten med godtyckliga värden som inte är inställda i konfigurationen.
Från och med version 3 av Tailwind CSS har JIT-läge blivit standard.
versioner
Tailwind CSS använder semantisk versionshantering för att identifiera dess versionskompatibilitet.
Framstående användningsområden
Se även
externa länkar
- Officiell medvindsdokumentation .
- Tailwind Play , testmiljö i realtid.