Tailwind CSS - Construir rapidamente sites modernos sem nunca deixar o seu HTML.

cerca de 1000~20000

78

Ótima conquista. deve ser próspero auspicioso

3

104.22.20.144

TailwindCSS-RapidlybuildmodernwebsiteswithouteverleingyourHTML.try{if(localStore.theme==='dark'||(!('theme'inlocalStore)&&window.matchMedia('(prefers-color-scheme:dark)').matches)){document.documentElement.classList.add('dark')document.querySelector('meta[name="theme-color"]').setAttribute('content','#0B1120')}else{document.documentElement.classList.remove('dark')}}catch(_){}SearchNigationDocsComponentsBlogShowcaseThemeTailwindCSSonGitHubRapidlybuildmodernwebsiteswithouteverleingyourHTML.Autility-firstCSSframeworkpackedwithclasseslikeflex,pt-4,text-centerandrotate-90thatcanbecomposedtobuildanydesign,directlyinyourmarkup.GetstartedQuicksearch...123456789101112131415161718192021<figureclass="md:flexbg-slate-100rounded-xlp-8md:p-0dark:bg-slate-800"><imgclass="w-24h-24md:w-48md:h-automd:rounded-nonerounded-fullmx-auto"src="/sarah-dayan.jpg"alt=""width="384"height="512"><divclass="pt-6md:p-8text-centermd:text-leftspace-y-4"><blockquote><pclass="text-lgfont-medium">“TailwindCSSistheonlyframeworkthatIx27;veseenscaleonlargeteams.It’seasytocustomize,adaptstoanydesign,andthebuildsizeistiny.”</p></blockquote><figcaptionclass="font-medium"><divclass="text-sky-500dark:text-sky-400">SarahDayan</div><divclass="text-slate-700dark:text-slate-500">StaffEngineer,Algolia</div></figcaption></div></figure>“TailwindCSSistheonlyframeworkthatIx27;veseenscaleonlargeteams.It’seasytocustomize,adaptstoanydesign,andthebuildsizeistiny.”SarahDayanStaffEngineer,Algolia“Bestpractices”don’tactuallywork.I’vewrittenafewthousandwordsonwhytraditional“semanticclassnames”arethereasonCSSishardtomaintain,butthetruthisyou’renevergoingtobelievemeuntilyouactuallytryit.Ifyoucansuppresstheurgetoretchlongenoughtogiveitachance,Ireallythinkyou’llwonderhowyoueverworkedwithCSSanyotherway.AdamWathanCreatorofTailwindCSSTestimonialsIfeellikeanidiotfornotusingTailwindCSSuntilnow.RyanFlorenceRemix&ReactTrainingIfIhadtorecommendawayofgettingintoprogrammingtoday,itwouldbeHTML+CSSwithTailwindCSS.GuillermoRauchVercelIhenodesignskillsandwithTailwindIcanactuallymakegoodlookingwebsiteswitheaseanditx27;severythingIeverwantedinaCSSframework.SaraVieiraCodeSandboxTailwindCSSisthegreatestCSSframeworkontheplanet.Bret"TheHitman"HartFormerWWEChampionIstartedusing@tailwindcss.Iinstantlyfellinlovewiththeirresponsivemodifiers,thoroughdocumentation,andhoweasyitwascustomizingcolorpalettes.DaceyNolanSoftwareEngineerLovedittheverymomentIusedit.GilbertRabutTsurwaWebDeveloperThere’sonethingthatsucksabout@tailwindcss-onceyou’veuseditonahandfulofprojectsitisarealpainintheasstowritenormalCSSain.GraemeHoustonJaScriptDeveloperOkay,I’mofficially*all*inonthe@tailwindcsshypetrain.Neverthoughtbuildingwebsitescouldbesoridiculouslyfastandflexible.AaronBushnellProgrammer@TrendyMindsOkay,@tailwindcssjustclickedformeandnowIfeellikea#!@%&$%idiot.KenWheelerReactEngineerIx27;vebeenusing@tailwindcssthepastfewmonthsanditx27;samazing.Ialreadyusedsomeutilityclassesbefore,butgoingutility-first...thisistheway.JadLimcacoDesignerAfterfinallygettingtouse@tailwindcssonarealclientprojectinthelasttwoweeksIneverwanttowriteCSSbyhandain.Iwasaskeptic,butthehypeisreal.LukeRedpathRuby&iOSDeveloperIdidnx27;tthinkIwasgoingtolike@tailwindcss...spentadayusingitforaPOC,loveit!Iwishthishadbeenaroundwhenwestartedourcompanydesignsystem,seriouslyconsideringacompleterebuildJonBloomerFront-EndDeveloper@tailwindcsslookedunpleasantatfirst,butnowI’mhookedonit.AndrewGillilandFront-EndDeveloperOnceyoustartusingtailwind,thereisnogoingback.PreenKumarIuse@tailwindcssforeverysingleprojectbecauseitremovesmostoftheannoyancesofcssandismultipletimesquickerVasuBansalItx27;schangedthetrajectoryofmybusiness.Ix27;mabletodesignbetterlooking,betterperforming,andmoreaccessiblecomponentsin1/3ofthetime.DennisWalshMyfirsttailwindprojectworkedgreatbutwhatreallykickedasswasgoingbacktoitmonthslaterandsingsomuchtimemakingnewchanges.Iknewhoweverythingfittogetherinstantly.EricL.BarnesTailwindlookedlikepuresphettiuntilIuseditinarealproject.Nowitx27;stheonlywayImakewebsites.Simple,fast,scalable.NickSaraevTailwindisaclassicexampleofwhyyouneedtoputpreconceptionsasidewhenevaluatingtech.TheexperienceandproductivityisstreetsaheadofwhatyoumighthebelievedbasedonoldschoolCSSthinking!LukeBennettTailwindCSSisaframeworklikenoother.Ratherthanconstrainingyoutoasetdesign,itgivesyouthetoolsandthestandardizationtobuildexactlywhatyouwant.SamCarréIrememberbeinghorrifiedthefirsttimeIsawutilityfirstcss.ButthesepastmonthsusingTailwindonanincreasingnumberofprojectshasjustbeenajoyfulnewwaytobuildthingsontheweb.EvanPayneIwasinitiallyskepticalasIbeganusing@tailwindcss,untilInowneededtocopya@sveltejscomponenttoadifferentlocationandIdidnx27;tneedtoworryaboutanyofmystylesbreaking.RotimiBest@tailwindcssmakesyoubetteratCSS.Changemymind.KelvinOmereshoneAwesomestuff!Ix27;mnodesignerorfront-enddeveloper;untilIfoundTailwindlastyearIhadnx27;tdoneanyCSSsincetheearlynineties.Tailwind,andTailwindUImeanIcannowcreategoodlookingfrontendsquickly,whichissuperempowering.Crazyimpressiveproject.JohnWClarkeIadmitIwasabigskepticof@tailwindcssuntillastyear.Ithought"whywouldIevertypeamillionclassesthatjustabstractsingleCSSproperties?"Bynow,IfeellikeIx27;mtwiceasproductivewhenbuildingUIs.Itx27;sreallyamazing.SumitKumarIx27;mnearingcompletiononmymonths-longprojectofrewritingmycompanyx27;sfrontendinTypeScriptand@tailwindcss.Still,everytimeIre-implementacomponent,Ithink,"Wow,thatwaswayeasierthistime."Tailwindrocks.MannieSchumpertCo-Founder/CTO@LaunchPathIncWiththeamountofshippingwehetodo,skippingtheconversionofbrainwestoCSS,andbeingabletoimplementatthespeedofthoughtusingTailwind,mylifeasafullstackdeveloperhasneverbeenmoreblissful.ChristianHolmanTailwindmakesiteasytobringnewdevelopersintothefrontendprojectwithouthingtoworryaboutthementalexerciseofunderstanding‘some’developer’sclasshierarchyandthoughtprocessbehindit.JilsonThomasUIDesigner/DeveloperTailwindhasbeenatotalgame-changerforourdevteam.Itallowsustomovefaster,keepourUIconsistent,andfocusontheworkwewanttodoinsteadofwritingCSS.JakeRyanSmithFull-StackDeveloperHebeenworkingwithCSSforovertenyearsandTailwindjustmakesmylifeeasier.ItisstillCSSandyouuseflex,grid,etc.butjustquickertowriteandmaintain.DebbieOx27;BrienSeniorProgramManeratMicrosoftI’vebeenwritingCSSforover20years,andupuntil2017,thewayIwroteitchangedfrequently.It’snotacoincidenceTailwindwasreleasedthesameyear.Itmightlookwrong,butspendtimewithitandyou’llrealizesemanticCSSwasa20yearmistake.BenFurfieDeveloperTailwindmakeswritingcodefeellikeI’musingadesigntool.DidierCatzCo-Founder@StyptAppTailwindCSSisbridgingthegapbetweendesignsystemsandproducts.It’sbecomingthedefactoAPIforstyling.SarahDayanStaffSoftwareEngineer@AlgoliaIneverwanttowriteregularCSSain.Only@tailwindcss.TreyPiepmeierWebDeveloperIcameintomyjobwonderingwhythelastdevwouldeverimplementTailwindintoourprojects,withindaysIwasaTailwindconvertanduseitforallofmypersonalprojects.MadelineCampbellFull-StackDeveloperTailwindmademeenjoyfrontenddevelopmentainandgemetheconfidencethatIcanrealizeanydesign-nomatterhowcomplexitmaybe.MarcelPociotCTOat@beyondcodeTailwindturnedmeintoacompletestackdeveloper.BorisLepikhinFull-StackDeveloperTailwindistheeasiestandsimplestpartofanyprojectIworkon.Icanx27;timineIx27;llbuildanythingbigwithoutit.ChristopherPittDeveloperTailwindCSShasalleviatedsomanyproblemswex27;veallbecomeaccustomedtowithtraditionalCSSthatitmakesyouwonderhowyoueverdevelopedwebsiteswithoutit.ChaseGiuntaDeveloperHingusedotherCSSframeworks,IalwayscomebacktoTailwindCSSasitgivesmetheabilitytocreateaconsistentandeasytousedesignsysteminmyprojects.ThankstoTailwindCSSIonlyneedonecupofcoffeetogetstartedonanewproject.IvanGuzmanSoftwareEngineerI’vebeenusingTailwindCSSformanyyears,andyettheyseemtostillamazeuseveryyearwiththeupdates.It’saidedmeinbuildingwebsitessuperquickly,IcouldnevergobacktoboringoldCSSclasses!CharlieJosephDeveloperTailwindCSSisadesignsystemimplementationinpureCSS.Itisalsoconfigurable.Itgivesdeveloperssuperpowers.ItallowsthemtobuildwebsiteswithacleanconsistentUIoutofthebox.Itintegrateswellwithanywebdevframeworkbecauseit‘sjustCSS!Genius.KahlilLecheltJaScriptDeveloperIt’ssupersimpletoslowlymigratetoTailwindfrome.g.Bootstrapbyusingitsprefixfeature.Benefitingfromitsfeatureswhilenothingtospendalotoftimeupfrontisamazing!MarcoSinghofFull-StackDeveloperIwasn’tcomfortableusingCSSuntilImetTailwind.Itseasytouseabstractioncombinedwithexcellentdocumentationareagamechanger!JoostMeijlesHeadofUnplatform@ivasolutionsTailwindturnsimplementingdesignsfromachoretoajoy.Youx27;llfallinlovewithbuildingfortheweballoverain.MattSwansonDeveloperTailwindCSShelpsyouejectfromthecomplexityofabstractingstylesaway.HingstylesrightthereinyourHTMLispowerful,whichgetsevenmoreobviouswhenusingproductslikeTailwindUI.MatijaMarohnićFront-EndDeveloperIfTailwindislikeTachyonsonsteroids,TailwindUIislikeLanceArmstrongwinningtheTourdeFrance(seventimes).Without,ofcourse,thescandalandshame.HughDurkinDeveloperBeingburnedbyotherabandonedCSSframeworks,mybiggestfearwastobetonyetanotherframeworkthatmaydisappear.However,Igeitatryandcouldn’tbehappier.Theykeepimprovingtheframeworkinmeaningfulwaysonaregularbasis.Itfeelsverymuchalive.MatthiasSchmidtProgrammerGettingbuy-inonTailwindCSSfromourentireteamofdeveloperstooksometimeanddiscussion,butonceweimplementedcompanywide,ithasmadeitabreezeforanydevelopertojumpintoanyprojectandquicklymakechanges/enhancements.JerredHurstCTOPrimitiveTailwindCSShasatthesametimemadeCSSenjoyableanddrasticallychangedhowIbuildoutproducts.Itx27;srapid,efficientandanabsolutejoytoworkwith.BraunsonYerFullStackDeveloper&DesignerUsinganyCSSframeworkotherthanTailwindseemslikeastepbackwardinwebdevelopmentatthispoint.AbsolutelynothingelsecomesclosetomakingmeasproductiveduringthedesignphaseofdevelopmentthanTailwind.ZacJordanZajdelDeveloperTailwindhascompletelyrevolutionizedourdevopspipeline.TheCLIworksconsistentlynomatterwhatframeworkisinplace.JoelVartyPresident&CTO@ilitycmsTailwindislikeareallynicepairofsocks.Youthink,“okay,howgoodcanapairofsocksbe”.Thenyouputsocksonandyouarelike“%@#!thesearesocks”.NeilDochertySoftwareEngineerTailwindunifiedourcssworkacrossdifferentclientprojectsmorethananyothermethodology,whilelettinguskeepourbespokedeTailwind CSS - Construir rapidamente sites modernos sem nunca deixar o seu HTML.signs,andevenimprovedperformanceandstabilityofoursites.SørenKottalDeveloperTailwindistheonlywaytoworkwithCSSatscale.AaronFrancisDeveloperTailwindCSShassingle-handedlybeenthebiggestandmostimpactfulchangeforourteamx27;sdevelopmentworkflow.Ix27;mgladIliveinauniversewhereTailwindexists.SanjaySoundarajanFront-EndDeveloperTailwindsolvesacomplexprobleminanelegantway.Itprovidesaready-to-useUI,allwhilenotcompromisingonenablingdeveloperstoquicklybuildanythingiminable.BrentGarnerDeveloperSkiptotheend.Use@tailwindcss.KentC.DoddsDeveloperandEducatorIwasbadatfront-enduntilIdiscoveredTailwindCSS.IhelearntalotmoreaboutdesignandCSSitselfafterIstartedworkingwithTailwind.Creatingwebpesis5xfasternow.ShrutiBalasaFullStackWebDeveloper&TechEducatorIdonx27;tuseitbutifIwouldusesomethingIx27;duseTailwind!PieterLevelsMakerWithTailwindIcanoffermyclientsfasterturnaroundtimesoncustomWordPressthemes,bothforinitialbuildsandforfuturerevisions.GregSullivanWordPressDeveloperThanksto@tailwindcss,CSSstartedtomakesensetome.NunoMaduroCoreTeamMember@larelphpTailwindclickedformealmostimmediately.Icanx27;tpicturemyselfwritinganotherBEMclasseverain.Happyusersincethefirstpublicrelease!Productivityisatanalltimehigh,thanksto@tailwindcss.IgorRandjelovicDeveloperCSShasalwaysbeenthehardestpartofofferingadigitalservice.Itmademefeellikeabaddeveloper.Tailwindgivesmeconfidenceinwebdevelopmentain.Theirdocsaremyfirstportofcall.DanMaloneFounderof@mawla_ioIthought"WhywouldIneedTailwindCSS?IalreadyknowCSSanduseBootstrap",butaftergivingitatryIdecidedtoswitchallmyprojectstoTailwind.SergioPerisDevOpsEngineer&NetworkAdministratorTheTailwinddocsareitsrealmic.ItisactuallybetterdocumentedthanCSSitself.It’ssuchapleasuretouse.ZachKnickerbockerDeveloperIx27;veneverfeltmoreconfidentdesigningandstylingwebsitesandwebappsthanwhenIx27;veusedTailwindCSS.GlennMeyerDeveloperTrieditonce,neverlookedback.Tailwindcssconvertsince0.7anditjustkeepsgettingbetterandbetter.JanDx27;HollanderFront-EndDeveloperIfyouworkatanencyanddealwithhundredsofuniquesites,eachofthemhingtheirowncustomCSSisanightmare.DoyourfutureselfaforanduseTailwind!AndrewBrownBeforeTailwindCSSIwasbangingmyheadainstthewalltryingtomakesenseofmyCSSsphetti.NowIambangingmyheadainstthewallwonderingwhyIdidn’ttryitearlier.Myheadhurtsandmywallhasabigholeinit.ButatleastusingCSSispleasantain!MarcKöhlbruggeIwasskepticalatfirstandresistedforalongtimebutafterdoingthefirstprojectswithTailwindCSSthisyear,normalCSSjustfeelswrongandslow.DidHellmannDigitalDesigner&DeveloperAfterusingTailwindforthefirsttime,IwonderedwhyIusedanythingelse.Itx27;snowmygo-toCSSframeworkforanyapplication,productionorprototype.JoshuaLoweDeveloperTailwindnotonlymademeabletofocusonbuildinggreatUI’sbutitalsoimprovedmyoverallCSSskillsbyhingsuchawonderfuldocssitewhenIneededtohandwriteCSS.JoshMandersDeveloperUsingTailwindisanaccelerantforrapidprototypingdesignsystems.Strongdocumentation,helpfulcommunity,andinstantresults.IanGaenssleyDesignOperationsLeadatBetterCloudIinstinctivelyhatedutilityCSS,butTailwindcompletelyconvertedme.Itreignitedmyexcitementforfront-enddevelopmentandimplementingcustomdesigns!JessArcherFull-StackDeveloperTailwindCSSbridgesthegapbetweendesignanddevmorethananythingelse.Itreintroducescontexttodevelopment,limitscognitiveloadwithchoicearchitecture,grantsaccesstoatokenlibraryoutoftheboxandisincrediblyeasytopickup.Ithelpedmydesigncareersomuch.CoreyGinnivanCo-FounderofFeatureBoardWhenIx27;mworkingonaprojectthatisnx27;tusingTailwind,firstIyell,thenItakeadeepbreath,thenIrunnpminstalltailwindcss.RyanChenkieGoingbacktoalargewebsitethatdoesnx27;tuseTailwindislikehoppingoutofaTeslaandintomydadx27;srustedMinnesotafarmtruck.Sure,itworks,buttheclutchisslipping,thebrakesbarelywork,anditx27;sfilledwitholdtireswex27;renotevenusinganymore.DanGayleSeniorFront-EndDeveloper@CrateandBarrelIpushedbackhardatthementionofTailwindinitiallyduetothenumberofclassesinmycodehoweverwithin5minutesorusingitIwashookedandnowamtheannoyingguypushingTailwindonanyonewhowilllisten.Ithassimplifiedmydevworkflowbeyondmeasurement.DanBrookingHeadEngineer@SubscriptionBoxIneverbotheredtolearnvanillaCSSbecauseit’sawasteoftime—whybotherwhenIheTailwindinstead?TurnsoutIlearnedatonofCSSanywayjustbyusingTailwind.It’ssuchaperfectmiddlegroundbetweenthoughtfulabstraction,whilestilllettingyoubreakfree.TrevorCampbellTailwindandtheecosystemarounditislikeagiantturbochargerforwebencies.Ithelpsteamsofdevelopersanddesignersdevelopasharedlangueandsystemofconstraintsthatspeedsuptheentireprocess.Itx27;sagame-changerforefficientteamwork.JeffSalFull-StackDeveloperTailwindprovidesthestyleofbespokedesign,theconstraintofadesignsystem,andtheflexibilitytomakeitinfinitelycustomizable,withoutbeingshoehornedintomakingeverywebsitelooklikeitwascutfromthesamecloth.MichaelDyryndaAustralianTailwindcompletelychangedmyfreelancecareerbyallowingmetobuildoutcompletelycustomdesignsreallyfastwithoutwritinganyCSS.JasonBeggsFront-EndDeveloperUsingTailwindCSSwillmakeyoufeellikeyoujustunlockedacheatcode.DidPaluyCTO@QuartixEverydeveloperI’veconvincedtogiveTailwindatryhascomebackandsaidtheyarenevergoingback.Every.Single.One.JacobGrafWebDeveloperShowmore...Constraint-basedAnAPIforyourdesign system.Utilityclasseshelpyouworkwithintheconstraintsofasysteminsteadoflitteringyourstylesheetswitharbitraryvalues.Theymakeiteasytobeconsistentwithcolorchoices,spacing,typography,shadows,andeverythingelsethatmakesupawell-engineereddesignsystem.Learnmore,utility-firstfundamentalsSizingColorsTypographyShadowsw-96w-80w-72w-64w-60w-56w-52w-48w-64w-60w-56w-52w-48w-44w-40w-36123456789101112131415161718192021222324252627<divclass="space-y-4"><divclass="w-96bg-whiteshadowrounded">w-96</div><divclass="w-80bg-whiteshadowrounded">w-80</div><divclass="w-72bg-whiteshadowrounded">w-72</div><divclass="w-64bg-whiteshadowrounded">w-64</div><divclass="w-60bg-whiteshadowrounded">w-60</div><divclass="w-56bg-whiteshadowrounded">w-56</div><divclass="w-52bg-whiteshadowrounded">w-52</div><divclass="w-48bg-whiteshadowrounded">w-48</div></div>BuildanythingBuildwhateveryouwant, seriously.BecauseTailwindissolow-level,itneverencouresyoutodesignthesamesitetwice.Evenwiththesamecolorpaletteandsizingscale,itx27;seasytobuildthesamecomponentwithacompletelydifferentlookinthenextproject.Getstarted,installationSimplePlayfulElegantBrutalist1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<divclass="flexfont-sans"><divclass="flex-nonew-48relative"><imgsrc="/classic-utility-jacket.jpg"alt=""class="absoluteinset-0w-fullh-fullobject-cover"loading="lazy"/></div><formclass="flex-autop-6"><divclass="flexflex-wrap"><h1class="flex-autotext-lgfont-semiboldtext-slate-900">ClassicUtilityJacket</h1><divclass="text-lgfont-semiboldtext-slate-500">$110.00</div><divclass="w-fullflex-nonetext-smfont-mediumtext-slate-700mt-2">Instock</div></div><divclass="flexitems-baselinemt-4mb-6pb-6border-bborder-slate-200"><divclass="space-x-2flextext-sm"><label><inputclass="sr-onlypeer"name="size"type="radio"value="xs"checked/><divclass="w-9h-9rounded-lgflexitems-centerjustify-centertext-slate-700peer-checked:font-semiboldpeer-checked:bg-slate-900peer-checked:text-white">XS</div></label><label><inputclass="sr-onlypeer"name="size"type="radio"value="s"/><divclass="w-9h-9rounded-lgflexitems-centerjustify-centertext-slate-700peer-checked:font-semiboldpeer-checked:bg-slate-900peer-checked:text-white">S</div></label><label><inputclass="sr-onlypeer"name="size"type="radio"value="m"/><divclass="w-9h-9rounded-lgflexitems-centerjustify-centertext-slate-700peer-checked:font-semiboldpeer-checked:bg-slate-900peer-checked:text-white">M</div></label><label><inputclass="sr-onlypeer"name="size"type="radio"value="l"/><divclass="w-9h-9rounded-lgflexitems-centerjustify-centertext-slate-700peer-checked:font-semiboldpeer-checked:bg-slate-900peer-checked:text-white">L</div></label><label><inputclass="sr-onlypeer"name="size"type="radio"value="xl"/><divclass="w-9h-9rounded-lgflexitems-centerjustify-centertext-slate-700peer-checked:font-semiboldpeer-checked:bg-slate-900peer-checked:text-white">XL</div></label></div></div><divclass="flexspace-x-4mb-6text-smfont-medium"><divclass="flex-autoflexspace-x-4"><buttonclass="h-10px-6font-semiboldrounded-mdbg-blacktext-white"type="submit">Buynow</button><buttonclass="h-10px-6font-semiboldrounded-mdborderborder-slate-200text-slate-900"type="button">Addtob</button></div><buttonclass="flex-noneflexitems-centerjustify-centerw-9h-9rounded-mdtext-slate-300borderborder-slate-200"type="button"aria-label="Like"><svgwidth="20"height="20"fill="currentColor"aria-hidden="true"><pathfill-rule="evenodd"clip-rule="evenodd"d="M3.1725.172a440015.6560L106.343l1.172-1.171a440115.6565.656L1017.657l-6.828-6.829a440010-5.656z"/></svg></button></div><pclass="text-smtext-slate-700">FreeshippingonallcontinentalUSorders.</p></form></div>PerformanceIt’stiny—nevershipunusedCSSain.TailwindautomaticallyremovesallunusedCSSwhenbuildingforproduction,whichmeansyourfinalCSSbundleisthesmallestitcouldpossiblybe.Infact,mostTailwindprojectsshiplessthan10kBofCSStotheclient.Learnmore,optimizingforproductionindex.htmltailwind.config.jspacke.json1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial-scale=1.0">6<title>Document</title>7<linkrel="stylesheet"href="/build.css">8</head>9<body>10<buttonclass=""></button>11</body>12</html>13build.css1Terminalnpxtailwindcss-o--outputbuild.css--contentindex.html-w--watchMobile-firstResponsiveeverything.WrestlingwithabunchofcomplexmediaqueriesinyourCSSsucks,soTailwindletsyoubuildresponsivedesignsrightinyourHTMLinstead.Throwascreensizeinfrontofliterallyanyutilityclassandwatchitmicallyapplyataspecificbreakpoint.Learnmore,responsivedesignsmmdlgxl2xlworkcation.comTailwindUI-OfficialTailwindCSSComponentsWorkcation-FindatripthatsuitsyouHeadlessUI–Unstyled,fullyaccessibleUIcomponents12345678910111213141516171819202122232425262728293031323334353637383940<mainclass="py-6px-4sm:p-6md:py-10md:px-8"><divclass="max-w-4xlmx-autogridgrid-cols-1lg:max-w-5xllg:gap-x-20lg:grid-cols-2"><divclass="relativep-3col-start-1row-start-1flexflex-col-reverserounded-lgbg-gradient-to-tfrom-black/75via-black/0sm:bg-nonesm:row-start-2sm:p-0lg:row-start-1"><h1class="mt-1text-lgfont-semiboldtext-whitesm:text-slate-900md:text-2xldark:sm:text-white">BeachHouseinCollingwood</h1><pclass="text-smleading-4font-mediumtext-whitesm:text-slate-500dark:sm:text-slate-400">Entirehouse</p></div><divclass="gridgap-4col-start-1col-end-3row-start-1sm:mb-6sm:grid-cols-4lg:gap-6lg:col-start-2lg:row-end-6lg:row-span-6lg:mb-0"><imgsrc="/beach-house.jpg"alt=""class="w-fullh-60object-coverrounded-lgsm:h-52sm:col-span-2lg:col-span-full"loading="lazy"><imgsrc="/beach-house-interior-1.jpg"alt=""class="hiddenw-fullh-52object-coverrounded-lgsm:blocksm:col-span-2md:col-span-1lg:row-start-2lg:col-span-2lg:h-32"loading="lazy"><imgsrc="/beach-house-interior-2.jpg"alt=""class="hiddenw-fullh-52object-coverrounded-lgmd:blocklg:row-start-2lg:col-span-2lg:h-32"loading="lazy"></div><dlclass="mt-4text-xsfont-mediumflexitems-centerrow-start-2sm:mt-1sm:row-start-3md:mt-2.5lg:row-start-2"><dtclass="sr-only">Reviews</dt><ddclass="text-indigo-600flexitems-centerdark:text-indigo-400"><svgwidth="24"height="24"fill="none"aria-hidden="true"class="mr-1stroke-currentdark:stroke-indigo-500"><pathd="m12525h5l-442.1035L1216l-5.1033L914l-4-4h5l2-5Z"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg><span>4.89<spanclass="text-slate-400font-normal">(128)</span></span></dd><dtclass="sr-only">Location</dt><ddclass="flexitems-center"><svgwidth="2"height="2"aria-hidden="true"fill="currentColor"class="mx-3text-slate-300"><circlecx="1"cy="1"r="1"/></svg><svgwidth="24"height="24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"class="mr-1text-slate-400dark:text-slate-500"aria-hidden="true"><pathd="M1811.034C1814.89712191219s-6-4.103-6-7.966C67.6558.8195125s62.65566.034Z"/><pathd="M1411a22011-402200140Z"/></svg>Collingwood,Ontario</dd></dl><divclass="mt-4col-start-1row-start-3self-centersm:mt-0sm:col-start-2sm:row-start-2sm:row-span-2lg:mt-6lg:col-start-1lg:row-start-3lg:row-end-4"><buttontype="button"class="bg-indigo-600text-whitetext-smleading-6font-mediumpy-2px-3rounded-lg">Checkailability</button></div><pclass="mt-4text-smleading-6col-start-1sm:col-span-2lg:mt-6lg:row-start-4lg:col-span-1dark:text-slate-400">Thissunnyandspaciousroomisforthosetrelinglightandlookingforacomfyandcosyplacetolaytheirheadforanightortwo.Thisbeachhousesitsinavibrantneighborhoodlitteredwithcafes,pubs,restaurantsandsupermarketsandisclosetoallthemajorattractionssuchasEdinburghCastleandArthurx27;sSeat.</p></div></main>StatevariantsHoverandfocusstates?Wegot ’em.Wanttostylesomethingonhover?Stickhover:atthebeginningoftheclassyouwanttoadd.Worksforfocus,active,disabled,focus-within,focus-visible,andevenfancystatesweinventedourselveslikegroup-hover.Learnmore,handlinghover,focus,andotherstatesProjectsNewTitleAPIIntegrationCategoryEngineeringUsersTitleNewBenefitsPlanCategoryHumanResourcesUsersTitleOnboardingEmailsCategoryCustomerSuccessUsersNewproject12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<section><headerclass="bg-whitespace-y-4p-4sm:px-8sm:py-6lg:p-4xl:px-8xl:py-6"><divclass="flexitems-centerjustify-between"><h2class="font-semiboldtext-slate-900">Projects</h2><ahref="/new"class="hover:bg-blue-400groupflexitems-centerrounded-mdbg-blue-500text-whitetext-smfont-mediumpl-2pr-3py-2shadow-sm"><svgwidth="20"height="20"fill="currentColor"class="mr-2"aria-hidden="true"><pathd="M105a1100111v3h3a1101102h-3v3a11011-20v-3H6a110110-2h3V6a110011-1Z"/></svg>New</a></div><formclass="grouprelative"><svgwidth="20"height="20"fill="currentColor"class="absoluteleft-3top-1/2-mt-2.5text-slate-400pointer-events-nonegroup-focus-within:text-blue-500"aria-hidden="true"><pathfill-rule="evenodd"clip-rule="evenodd"d="M84a4401008440000-8zM28a6601110.893.476l4.8174.817a11001-1.4141.414l-4.816-4.816A6600128z"/></svg><inputclass="focus:ring-2focus:ring-blue-500focus:outline-noneappearance-nonew-fulltext-smleading-6text-slate-900placeholder-slate-400rounded-mdpy-2pl-10ring-1ring-slate-200shadow-sm"type="text"aria-label="Filterprojects"placeholder="Filterprojects..."></form></header><ulclass="bg-slate-50p-4sm:px-8sm:pt-6sm:pb-8lg:p-4xl:px-8xl:pt-6xl:pb-8gridgrid-cols-1sm:grid-cols-2lg:grid-cols-1xl:grid-cols-2gap-4text-smleading-6"><lix-for="projectinprojects"><a:href="project.url"class="hover:bg-blue-500hover:ring-blue-500hover:shadow-mdgrouprounded-mdp-3bg-whitering-1ring-slate-200shadow-sm"><dlclass="gridsm:blocklg:gridxl:blockgrid-cols-2grid-rows-2items-center"><div><dtclass="sr-only">Title</dt><ddclass="group-hover:text-whitefont-semiboldtext-slate-900">{project.title}</dd></div><div><dtclass="sr-only">Category</dt><ddclass="group-hover:text-blue-200">{project.category}</dd></div><divclass="col-start-2row-start-1row-end-3sm:mt-4lg:mt-0xl:mt-4"><dtclass="sr-only">Users</dt><ddx-for="userinproject.users"class="flexjustify-endsm:justify-startlg:justify-endxl:justify-start-space-x-1.5"><img:src="user.atar":alt="user.name"class="w-6h-6rounded-fullbg-slate-100ring-2ring-white"loading="lazy"></dd></div></dl></a></li><liclass="flex"><ahref="/new"class="hover:border-blue-500hover:border-solidhover:bg-whitehover:text-blue-500groupw-fullflexflex-colitems-centerjustify-centerrounded-mdborder-2border-dashedborder-slate-300text-smleading-6text-slate-900font-mediumpy-3"><svgcTailwind CSS - Construir rapidamente sites modernos sem nunca deixar o seu HTML.lass="group-hover:text-blue-500mb-1text-slate-400"width="20"height="20"fill="currentColor"aria-hidden="true"><pathd="M105a1100111v3h3a1101102h-3v3a11011-20v-3H6a110110-2h3V6a110011-1Z"/></svg>Newproject</a></li></ul></section>Component-drivenWorriedaboutduplication?Don’t be.Ifyoux27;rerepeatingthesameutilitiesoverandoverandoverain,allyouhetodoisextractthemintoacomponentortemplatepartialandboom—youx27;vegotasinglesourceoftruthsoyoucanmakechangesinoneplace.Learnmore,reusingstylesReactVueAngularBladeNewReleasesTopRatedVincent’sPicksPrognosisNegativeStarrating2.66RatingPG-13Year2021GenreComedyRuntime1h46mCastSimonPegg,ZachGalifianakisRochelle,RochelleStarrating3.25RatingRYear2020GenreRomanceRuntime1h56mCastEmiliaClarkeDeathBlowStarrating4.95Rating18AYear2020GenreActionRuntime2h5mCastIdrisElba,JohnCena,ThandiweNewtonMovies.jsN.jsNItem.jsList.jsListItem.js12345678910111213141516171819202122importNfromx27;./N.jsx27;importNItemfromx27;./NItem.jsx27;importListfromx27;./List.jsx27;importListItemfromx27;./ListItem.jsx27;exportdefaultfunctionMovies({movies}){return(<divclassName="divide-ydivide-slate-100"><N><NItemhref="/new"isActive>NewReleases</NItem><NItemhref="/top">TopRated</NItem><NItemhref="/pickTailwind CSS - Construir rapidamente sites modernos sem nunca deixar o seu HTML.s">Vincent’sPicks</NItem></N><List>{movies.map((movie)=>(<ListItemkey={movie.id}movie={movie}/>))}</List></div>)}Notintocomponentframeworks?UseTailwindx27;s@applydirectivetoextractrepeatedutilitypatternsintocustomCSSclassesjustbycopyingandpastingthelistofclassnames.Learnmore,reusingstylesWeeklyone-on-oneDateandtimeThuNov15,202010:00am-11:00amESTLocationKitchener,ONDescriptionNomeetingdescriptionAttendeesAndrewMcDonaldDeclineAcceptstyles.css123456789101112.btn{@applytext-basefont-mediumrounded-lgp-3;}.btn--primary{@applybg-sky-500text-white;}.btn--secondary{@applybg-slate-100text-slate-900;}index.html313233343536373839</dd></div></dl><footerclass="gridgrid-cols-2gap-x-6"><buttonclass="btnbtn--secondary">Decline</button><buttonclass="btnbtn--primary">Accept</button></footer></article>DarkmodeNowwithDark Mode.Don’twanttobeoneofthosewebsitesthatblindspeoplewhentheyopenitontheirphoneat2am?Enabledarkmodeinyourconfigurationfilethenthrowdark:infrontofanycolorutilitytoapplyitwhendarkmodeisactive.Worksforbackgroundcolors,textcolors,bordercolors,andevengradients.Learnmore,darkmodeDisabledarkmodeEp.128ScalingCSSatHerokuwithUtilityClassesFullStackRadio24:1675:501x123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475<divclass="bg-whiteborder-slate-100dark:bg-slate-800dark:border-slate-500border-brounded-t-xlp-4pb-6sm:p-10sm:pb-8lg:p-6xl:p-10xl:pb-8space-y-6sm:space-y-8lg:space-y-6xl:space-y-8"><divclass="flexitems-centerspace-x-4"><imgsrc="/full-stack-radio.png"alt=""width="88"height="88"class="flex-nonerounded-lgbg-slate-100"loading="lazy"/><divclass="min-w-0flex-autospace-y-1font-semibold"><pclass="text-cyan-500dark:text-cyan-400text-smleading-6"><abbrtitle="Episode">Ep.</abbr>128</p><h2class="text-slate-500dark:text-slate-400text-smleading-6truncate">ScalingCSSatHerokuwithUtilityClasses</h2><pclass="text-slate-900dark:text-slate-50text-lg">FullStackRadio</p></div></div><divclass="space-y-2"><divclass="relative"><divclass="bg-slate-100dark:bg-slate-700rounded-fulloverflow-hidden"><divclass="bg-cyan-500dark:bg-cyan-400w-1/2h-2"role="progressbar"aria-label="musicprogress"aria-valuenow="1456"aria-valuemin="0"aria-valuemax="4550"></div></div><divclass="ring-cyan-500dark:ring-cyan-400ring-2absoluteleft-1/2top-1/2w-4h-4-mt-2-ml-2flexitems-centerjustify-centerbg-whiterounded-fullshadow"><divclass="w-1.5h-1.5bg-cyan-500dark:bg-cyan-400rounded-fullring-1ring-insetring-slate-900/5"></div></div></div><divclass="flexjustify-betweentext-smleading-6font-mediumtabular-nums"><divclass="text-cyan-500dark:text-slate-100">24:16</div><divclass="text-slate-500dark:text-slate-400">75:50</div></div></div></div><divclass="bg-slate-50text-slate-500dark:bg-slate-600dark:text-slate-200rounded-b-xlflexitems-center"><divclass="flex-autoflexitems-centerjustify-evenly"><buttontype="button"aria-label="Addtoforites"><svgwidth="24"height="24"><pathd="M76.931C75.8657.85358.9055h6.19C16.1475175.865176.931V19l-5-4-54V6.931Z"fill="currentColor"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg></button><buttontype="button"class="hiddensm:blocklg:hiddenxl:block"aria-label="Previous"><svgwidth="24"height="24"fill="none"><pathd="m10128-6v12l-8-6Z"fill="currentColor"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/><pathd="M66v12"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg></button><buttontype="button"aria-label="Rewind10seconds"><svgwidth="24"height="24"fill="none"><pathd="M6.49216.95c2.8612.7337.52.73310.36202.861-2.7342.861-7.1660-9.9-2.862-2.733-7.501-2.733-10.3620A7.0967.0960005.58.226"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/><pathd="M55v3.111c0.491.398.889.889.889H9"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg></button></div><buttontype="button"class="bg-whitetext-slate-900dark:bg-slate-100dark:text-slate-700flex-none-my-2mx-autow-20h-20rounded-fullring-1ring-slate-900/5shadow-mdflexitems-centerjustify-center"aria-label="Pause"><svgwidth="30"height="32"fill="currentColor"><rectx="6"y="4"width="4"height="24"rx="2"/><rectx="20"y="4"width="4"height="24"rx="2"/></svg></button><divclass="flex-autoflexitems-centerjustify-evenly"><buttontype="button"aria-label="Skip10seconds"><svgwidth="24"height="24"fill="none"><pathd="M17.50916.95c-2.8622.733-7.5012.733-10.3630-2.861-2.734-2.861-7.1660-9.92.862-2.7337.501-2.73310.3630.38.365.711.759.9911.176"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/><pathd="M195v3.111c0.491-.398.889-.889.889H15"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg></button><buttontype="button"class="hiddensm:blocklg:hiddenxl:block"aria-label="Next"><svgwidth="24"height="24"fill="none"><pathd="M141266v12l8-6Z"fill="currentColor"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/><pathd="M186v12"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg></button><buttontype="button"class="rounded-lgtext-xsleading-6font-semiboldpx-2ring-2ring-insetring-slate-500text-slate-500dark:text-slate-100dark:ring-0dark:bg-slate-500">1x</button></div></div>CustomizationExtendit,tweakit,change it.Tailwindincludesanexpertlycraftedsetofdefaultsout-of-the-box,butliterallyeverythingcanbecustomized—fromthecolorpalettetothespacingscaletotheboxshadowstothemousecursor.Usethetailwind.config.jsfiletocraftyourowndesignsystem,thenletTailwindtransformitintoyourowncustomCSSframework.Learnmore,configurationSimplePlayfulElegantBrutalistTypographyCSSclassfont-displayFontnameInterSampleAaBbCcCSSclassfont-bodyFontsize14ptSampleLoremipsumdolorsitamet,consecteturadipiscingelit.Utauguegridacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegridacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegridacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegridacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegridacrasquisacduispretiumullamcorperconsequat.ColorsCSSclassprefixbg-primaryRange50-900SampleCSSclassprefixbg-secondaryRange50-900Sample1234567891011121314151617181920212223242526272829303132333435module.exports={theme:{fontFamily:{display:[x27;Interx27;,x27;system-uix27;,x27;sans-serifx27;],body:[x27;Interx27;,x27;system-uix27;,x27;sans-serifx27;],},colors:{primary:{50:x27;#eff6ffx27;,100:x27;#dbeafex27;,200:x27;#bfdbfex27;,300:x27;#93c5fdx27;,400:x27;#60a5fax27;,500:x27;#3b82f6x27;,600:x27;#2563ebx27;,700:x27;#1d4ed8x27;,800:x27;#1e40afx27;,900:x27;#1e3a8ax27;,},secondary:{50:x27;#f8fafcx27;,100:x27;#f1f5f9x27;,200:x27;#e2e8f0x27;,300:x27;#cbd5e1x27;,400:x27;#94a3b8x27;,500:x27;#bx27;,600:x27;#x27;,700:x27;#x27;,800:x27;#1e293bx27;,900:x27;#0f172ax27;,},},},}ModernfeaturesCutting-edgeisourcomfort zone.Tailwindisunapologeticallymodern,andtakesadvanteofallthelatestandgreatestCSSfeaturestomakethedeveloperexperienceasenjoyableaspossible.Wex27;vegotfirst-classCSSgridsupport,composabletransformsandgradientspoweredbyCSSvariables,supportformodernstateselectorslike:focus-visible,andtonsmore.Learnmore,gridtemplatecolumnsCSSGridTransformsFilters123456789101112131415161718<divclass="gridgrid-flow-colgrid-rows-2grid-cols-3gap-8"><div><imgsrc="/mountains-1.jpg"alt=""loading="lazy"></div><divclass="col-start-3"><imgsrc="/mountains-2.jpg"alt=""loading="lazy"></div><div><imgsrc="/mountains-3.jpg"alt=""loading="lazy"></div><div><imgsrc="/mountains-4.jpg"alt=""loading="lazy"></div><divclass="row-start-1col-start-2col-span-2"><imgsrc="/mountains-5.jpg"alt=""loading="lazy"></div></div>EditortoolsWorld-classIDEintegration.Worriedaboutrememberingalloftheseclassnames?TheTailwindCSSIntelliSenseextensionforVSCodehasyoucovered.Getintelligentautocompletesuggestions,linting,classdefinitionsandmore,allwithinyoureditorandwithnoconfigurationrequired.Learnmore,editorsetup123456789101112131415161718192021222324<divclass="w-fullflexitems-centerjustify-betweenblockp-6space-x-6"><divclass="flex-1truncate"><divclass="flexitems-centerspace-x-3"><h3class="text-slate-900text-smfont-mediumtruncate">JaneCooper</h3><spanclass="text-teal-600">Admin</span></div><pclass="mt-1text-slate-500text-smtruncate">RegionalParadigmTechnician</p></div><imgclass="w-10h-10bg-slate-300rounded-fullshrink-0"src="imes.unsplash.com/photo-77-be9c29b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"alt=""loading="lazy"></div><divclass="border-tborder-slate-200"><divclass="-mt-pxflex"><divclass="w-0flex-1flexborder-rborder-slate-200"><ahref="#"class="relative-mr-pxw-0flex-1inline-flexitems-centerjustify-centerpy-4text-smtext-slate-700font-mediumborderborder-transparentrounded-bl-lghover:text-slate-500focus:outline-nonefocus:shadow-outline-bluefocus:border-blue-300focus:z-10transitionease-in-outduration-150"><svgclass="w-5h-5text-slate-400"xmlns="http/2000/svg"viewBox="002020"fill="currentColor"><pathd="M2.0035.884L109.882l7.997-3.998A22000164H4a22000-1.9971.884z"/><pathd="M188.118l-84-8-4V14a2200022h12a220002-2V8.118z"/></svg><spanclass="ml-3">Email</span></a></div></div></div>Problemsx27;flexx27;appliesthesameCSSpropertyasx27;blockx27;. cssConflict[1,20]x27;blockx27;appliesthesameCSSpropertyasx27;flexx27;. cssConflict[1,54]Ready-madecomponentsMoveevenfasterwithTailwind UI.TailwindUIisacollectionofbeautiful,fullyresponsiveUIcomponents,designedanddevelopedbyus,thecreatorsofTailwindCSS.Itx27;sgothundredsofready-to-useexamplestochoosefrom,andisguaranteedtohelpyoufindtheperfectstartingpointforwhatyouwanttobuild.LearnmoreGettingStartedInstallationEditorSetupUsingwithPreprocessorsOptimizingforProductionBrowserSupportUpgradeGuideCoreConceptsUtility-FirstFundamentalsHandlingHover,Focus,andOtherStatesResponsiveDesignDarkModeReusingStylesAddingCustomStylesFunctions&DirectivesCustomizationConfigurationContentConfigurationThemeConfigurationCustomizingScreensCustomizingColorsCustomizingSpacingPluginsPresetsCommunityGitHubDiscordTwitterYouTube