Är du intresserad av modern applikationsutveckling? Då kanske du har hört talas om Tailwind CSS. Denna CSS släpptes 2017 och ger dig ett helt annat tillvägagångssätt för styling. Tailwind är för ändamålscentrerade klasser som ingår i “funktionell CSS” och skär bort de semantiska klassnamnen. Tailwinds kraftfulla, minnesvärda och koncisa syntax gör den till ett snabbt växande substitut för Bootstrap och Foundation.
Vad är Tailwind CSS?
Tailwind är en gratis, öppen källkod, community-stödd CSS-ramverk med över 800 komponenter och mallar för start av nya projekt, applikationer och målsidor. Detta verktygsbaserade CSS-ramverk stöder snabb uppbyggnad av anpassade UI-komponenter. Den har inte förinställda komponenter som andra CSS-bibliotek och ramverk. Om du vill styla CSS-komponenter som marginal, flex, färg bland annat, kan du bygga och anpassa dessa gränssnitt med hjälp av dess tillhandahållande av verktygsklasser på låg nivå.
Hur installerar man Tailwind CSS?
Procedur 1: Installera Tailwind via npm
- npm init -y
- Npm install tailwindcss
- Använd @tailwind-direktivet för att injicera Tailwinds bas-, komponenter och verktygsstilar i din CSS-fil
- npx tailwindcss init
- npx tailwindcss build styles.css -o output.css
Du kan också välj en alternativ procedur som använder Tailwind via CDN, men den har vissa begränsningar som oförmåga att använda standardteman och direktiv som @apply, @variants, etc. Även tredjeparts plugins kan inte installeras.
Vikten av Tailwind
Utvecklarcommunityt stöder starkt Tailwind CSS redan från början eftersom det ger utvecklarna flexibilitet att skapa anpassade gränssnitt utan att begränsas av några UI-biblioteksregler.
Tvärtom, vissa utvecklare tycker att denna egenskap är lite parad; att använda det för utvecklingsprocessen eftersom vissa tillgängliga komponenter kan spara tid för att komma igång snabbare för vissa komponenter snarare än att börja från början.
Tailwind har helt responsiva UI-komponenter och sidmallar som gör det möjligt för utvecklare att kopiera och klistra in HTML-snuttar direkt i sin kodbas för användning eller modifiering. Du kan koncentrera dig på dina potentiella resultat och starta ditt projekt tidigast med dessa samlingar, vilket ger mer kraft till dina utvecklare och din organisation själv.
Låter värt ett försök, eller hur? I den här artikeln kommer du att få veta mer om Tailwind CSS och dess stylingkomponenter. Så låt oss dyka in!
- Tailwind Components
Dropdowns, inloggningar, modeller, flikar, bland annat, var alla en del av Tailwind CSS:s samling, tillsammans med det mycket fördelaktiga fuskbladet. Om du vill kan du till och med rekommendera dina komponenter för andras användning. För att använda någon komponent eller mall behöver du bara klicka på den respektive komponenten och sedan omdirigeras du till en enskild sida. Du kan förhandsgranska, ladda ner, fästa den till GitHub eller direkt kopiera koden som du vill.
- Tailblocks
Tailblocks har dussintals vittnesmål, lag, steg, statistik och andra layoutblock. Har du velat byta till stöd för mörkt läge? Tailblock har det och det låter dig ändra de primära färgerna från gränssnittet. Du behöver helt enkelt välja en layout, valfri färg från färgpaletten, välja mörkt eller ljust läge, välja knappen Visa kod och helt enkelt kopiera och klistra in den i ditt projekt.
- Meraki UI
Stöd för språken från höger till vänster är heltäckande under Meraki UI med hjälp av dussintals CSS-komponenter. Om ditt standardspråk för webbläsaren är inställt som ett RTL-språk, kan Merakai-gränssnittet vända på allt inklusive text, rullning, förloppsindikatorer, knappar, etc. Meraki-gränssnittet inkluderar varningar, inloggningsformulär, knappar, kort, rullgardinsmenyer, navigeringsfält, sidfot och sidfötter – ditt enda exemplar för att använda dessa komponenter.
- Tailwind Toolbox
En öppen källkod, community-stödd Tailwind Toolbox är en katalog med plugins, verktyg, generatorer, kit och guider som stöder bättre användning av Tailwind CSS. Den innehåller också cirka 45 målsidor och 16 komponenter, och det finns till och med ett alternativ för att bättre använda Tailwind CSS. Genom att använda alternativet Föreslå en resurs har du till och med möjlighet att bidra till insamlingen. För JavaScript-interaktion som öppning eller stängning av modaler tillhandahåller Tailwind Toolbox till och med skript. För att använda dessa skript behöver du bara klicka på mallen eller komponenten och sedan ladda ner den för mallar eller kopiera koden för komponenter.
- Tailwind Templates
Tailwind Templates har mer än 30 unika komponentdesigner som varningar, knappar, kort, formulär, sökinmatningar och modaler och utökar sin kollektion till stil med Tailwind CSS. Den har bara funktionskomponenter och om du behöver någon av dessa komponenter klickar du på klassificeringen och kopierar helt enkelt koden.
- Lofi UI
Lofi UI har low-fidelity CSS-komponenter, vilket gör att komponenterna kan återanvändas och har minimala stilar. Dessa komponenter är byggda för att vara tillräckligt effektiva när du använder HTML. När du klickar på någon komponent i Lofi UI kommer du att omdirigeras till CodePn så att du därifrån kan anpassa och kopiera den resulterande koden.
- Kometa UI Kit
Kometa har mer än hundra komponenter och layoutblock i en mängd kategorier som navigation, sidhuvuden, funktioner, innehåll, statistik, sidfötter och prissättning bland annat. Layouterna är responsiva och är tillgängliga som vanliga HTML-snuttar eller React-komponenter. Du kan använda alla komponenter i Kometa genom att klicka på den överordnade klassificeringen, välja en variant av ditt val, kopiera koden som vanlig HTML, Vue eller React-kod.
Fördelar med Tailwind CSS
- Kontroll över styling
- Snabbare CSS-stylingprocess CSS-
- klasser och ID:n kommer att ha standardiserade namn
- Koder i CSS-filer minimeras
- Komponenter kan utsättas för designanpassning
- Webbplatsers lyhördhet och säkerhet förstärks
- Ändringar kan göras på önskat sätt
- Kommer med extra funktioner
- Har gemensamma nyttomönster
- Den kan optimeras med PurgeCSS
Slutsats
Tailwind CSS inledde ett paradigmskifte i hur CSS används. Att skapa layouter med Tailwind CSS har blivit en cakewalk för utvecklare. Om du vill ha mer kontroll över utseendet du vill ha eller bestämma vad som kan vara fördelaktigt och vad som kan vara ofördelaktigt för din design, då är Tailwind CSS ditt optimala svar eftersom du kommer att ha allt för dig själv. Om du är bekant med CSS och vill påskynda designen och skapandet av din utvecklingsprocess på lång sikt, välj Tailwind CSS!
