Tailwind CSS - Rapidly build modern websites without ever ...

A utility-first CSS framework packed with classes like flex , pt-4 , text-center and rotate-90 that can be composed to build any design, directly in your markup ... “Bestpractices”don’tactuallywork.I’vewrittenafewthousandwordsonwhytraditional“semanticclassnames”arethereasonCSSishardtomaintain,butthetruthisyou’renevergoingtobelievemeuntilyouactuallytryit.Ifyoucansuppresstheurgetoretchlongenoughtogiveitachance,Ireallythinkyou’llwonderhowyoueverworkedwithCSSanyotherway.AdamWathanCreatorofTailwindCSSTestimonialsIfeellikeanidiotfornotusingTailwindCSSuntilnow.RyanFlorenceRemix&ReactTrainingIfIhadtorecommendawayofgettingintoprogrammingtoday,itwouldbeHTML+CSSwithTailwindCSS.GuillermoRauchVercelIhavenodesignskillsandwithTailwindIcanactuallymakegoodlookingwebsiteswitheaseandit'severythingIeverwantedinaCSSframework.SaraVieiraCodeSandboxTailwindCSSisthegreatestCSSframeworkontheplanet.Bret"TheHitman"HartFormerWWEChampionIstartedusing@tailwindcss.Iinstantlyfellinlovewiththeirresponsivemodifiers,thoroughdocumentation,andhoweasyitwascustomizingcolorpalettes.DaceyNolanSoftwareEngineerLovedittheverymomentIusedit.GilbertRabutTsurwaWebDeveloperThere’sonethingthatsucksabout@tailwindcss-onceyou’veuseditonahandfulofprojectsitisarealpainintheasstowritenormalCSSagain.GraemeHoustonJavaScriptDeveloperOkay,I’mofficially*all*inonthe@tailwindcsshypetrain.Neverthoughtbuildingwebsitescouldbesoridiculouslyfastandflexible.AaronBushnellProgrammer@TrendyMindsOkay,@tailwindcssjustclickedformeandnowIfeellikea#!@%&$%idiot.KenWheelerReactEngineerI'vebeenusing@tailwindcssthepastfewmonthsandit'samazing.Ialreadyusedsomeutilityclassesbefore,butgoingutility-first...thisistheway.JadLimcacoDesignerAfterfinallygettingtouse@tailwindcssonarealclientprojectinthelasttwoweeksIneverwanttowriteCSSbyhandagain.Iwasaskeptic,butthehypeisreal.LukeRedpathRuby&iOSDeveloperIdidn'[email protected],loveit!Iwishthishadbeenaroundwhenwestartedourcompanydesignsystem,seriouslyconsideringacompleterebuildJonBloomerFront-EndDeveloper@tailwindcsslookedunpleasantatfirst,butnowI’mhookedonit.AndrewGillilandFront-EndDeveloperOnceyoustartusingtailwind,thereisnogoingback.PraveenKumarIuse@tailwindcssforeverysingleprojectbecauseitremovesmostoftheannoyancesofcssandismultipletimesquickerVasuBansalIt'schangedthetrajectoryofmybusiness.I'mabletodesignbetterlooking,betterperforming,andmoreaccessiblecomponentsin1/3ofthetime.DennisWalshMyfirsttailwindprojectworkedgreatbutwhatreallykickedasswasgoingbacktoitmonthslaterandsavingsomuchtimemakingnewchanges.Iknewhoweverythingfittogetherinstantly.EricL.BarnesTailwindlookedlikepurespaghettiuntilIuseditinarealproject.Nowit'stheonlywayImakewebsites.Simple,fast,scalable.NickSaraevTailwindisaclassicexampleofwhyyouneedtoputpreconceptionsasidewhenevaluatingtech.TheexperienceandproductivityisstreetsaheadofwhatyoumighthavebelievedbasedonoldschoolCSSthinking!LukeBennettTailwindCSSisaframeworklikenoother.Ratherthanconstrainingyoutoasetdesign,itgivesyouthetoolsandthestandardizationtobuildexactlywhatyouwant.SamCarréIrememberbeinghorrifiedthefirsttimeIsawutilityfirstcss.ButthesepastmonthsusingTailwindonanincreasingnumberofprojectshasjustbeenajoyfulnewwaytobuildthingsontheweb.EvanPayneIwasinitiallyskepticalasIbeganusing@tailwindcss,untilInowneededtocopya@sveltejscomponenttoadifferentlocationandIdidn'tneedtoworryaboutanyofmystylesbreaking.RotimiBest@tailwindcssmakesyoubetteratCSS.Changemymind.KelvinOmereshoneAwesomestuff!I'mnodesignerorfront-enddeveloper;untilIfoundTailwindlastyearIhadn'tdoneanyCSSsincetheearlynineties.Tailwind,andTailwindUImeanIcannowcreategoodlookingfrontendsquickly,whichissuperempowering.Crazyimpressiveproject.JohnWClarkeIadmitIwasabigskepticof@tailwindcssuntillastyear.Ithought"whywouldIevertypeamillionclassesthatjustabstractsingleCSSproperties?"Bynow,IfeellikeI'mtwiceasproductivewhenbuildingUIs.It'sreallyamazing.SumitKumarI'mnearingcompletiononmymonths-longprojectofrewritingmycompany'[email protected],everytimeIre-implementacomponent,Ithink,"Wow,thatwaswayeasierthistime."Tailwindrocks.MannieSchumpertCo-Founder/CTO@LaunchPathIncWiththeamountofshippingwehavetodo,skippingtheconversionofbrainwavestoCSS,andbeingabletoimplementatthespeedofthoughtusingTailwind,mylifeasafullstackdeveloperhasneverbeenmoreblissful.ChristianHolmanTailwindmakesiteasytobringnewdevelopersintothefrontendprojectwithouthavingtoworryaboutthementalexerciseofunderstanding‘some’developer’sclasshierarchyandthoughtprocessbehindit.JilsonThomasUIDesigner/DeveloperTailwindhasbeenatotalgame-changerforourdevteam.Itallowsustomovefaster,keepourUIconsistent,andfocusontheworkwewanttodoinsteadofwritingCSS.JakeRyanSmithFull-StackDeveloperHavebeenworkingwithCSSforovertenyearsandTailwindjustmakesmylifeeasier.ItisstillCSSandyouuseflex,grid,etc.butjustquickertowriteandmaintain.DebbieO'BrienSeniorProgramManageratMicrosoftI’vebeenwritingCSSforover20years,andupuntil2017,thewayIwroteitchangedfrequently.It’snotacoincidenceTailwindwasreleasedthesameyear.Itmightlookwrong,butspendtimewithitandyou’llrealizesemanticCSSwasa20yearmistake.BenFurfieDeveloperTailwindmakeswritingcodefeellikeI’musingadesigntool.DidierCatzCo-Founder@StyptAppTailwindCSSisbridgingthegapbetweendesignsystemsandproducts.It’sbecomingthedefactoAPIforstyling.SarahDayanStaffSoftwareEngineer@AlgoliaIneverwanttowriteregularCSSagain.Only@tailwindcss.TreyPiepmeierWebDeveloperIcameintomyjobwonderingwhythelastdevwouldeverimplementTailwindintoourprojects,withindaysIwasaTailwindconvertanduseitforallofmypersonalprojects.MadelineCampbellFull-StackDeveloperTailwindmademeenjoyfrontenddevelopmentagainandgavemetheconfidencethatIcanrealizeanydesign-nomatterhowcomplexitmaybe.MarcelPociotCTOat@beyondcodeTailwindturnedmeintoacompletestackdeveloper.BorisLepikhinFull-StackDeveloperTailwindistheeasiestandsimplestpartofanyprojectIworkon.Ican'timagineI'llbuildanythingbigwithoutit.ChristopherPittDeveloperTailwindCSShasalleviatedsomanyproblemswe'veallbecomeaccustomedtowithtraditionalCSSthatitmakesyouwonderhowyoueverdevelopedwebsiteswithoutit.ChaseGiuntaDeveloperHavingusedotherCSSframeworks,IalwayscomebacktoTailwindCSSasitgivesmetheabilitytocreateaconsistentandeasytousedesignsysteminmyprojects.ThankstoTailwindCSSIonlyneedonecupofcoffeetogetstartedonanewproject.IvanGuzmanSoftwareEngineerI’vebeenusingTailwindCSSformanyyears,andyettheyseemtostillamazeuseveryyearwiththeupdates.It’saidedmeinbuildingwebsitessuperquickly,IcouldnevergobacktoboringoldCSSclasses!CharlieJosephDeveloperTailwindCSSisadesignsystemimplementationinpureCSS.Itisalsoconfigurable.Itgivesdeveloperssuperpowers.ItallowsthemtobuildwebsiteswithacleanconsistentUIoutofthebox.Itintegrateswellwithanywebdevframeworkbecauseit‘sjustCSS!Genius.KahlilLecheltJavaScriptDeveloperIt’ssupersimpletoslowlymigratetoTailwindfrome.g.Bootstrapbyusingitsprefixfeature.Benefitingfromitsfeatureswhilenothavingtospendalotoftimeupfrontisamazing!MarcoSinghofFull-StackDeveloperIwasn’tcomfortableusingCSSuntilImetTailwind.Itseasytouseabstractioncombinedwithexcellentdocumentationareagamechanger!JoostMeijlesHeadofUnplatform@avivasolutionsTailwindturnsimplementingdesignsfromachoretoajoy.You'llfallinlovewithbuildingfortheweballoveragain.MattSwansonDeveloperTailwindCSShelpsyouejectfromthecomplexityofabstractingstylesaway.HavingstylesrightthereinyourHTMLispowerful,whichgetsevenmoreobviouswhenusingproductslikeTailwindUI.MatijaMarohnićFront-EndDeveloperIfTailwindislikeTachyonsonsteroids,TailwindUIislikeLanceArmstrongwinningtheTourdeFrance(seventimes).Without,ofcourse,thescandalandshame.HughDurkinDeveloperBeingburnedbyotherabandonedCSSframeworks,mybiggestfearwastobetonyetanotherframeworkthatmaydisappear.However,Igaveitatryandcouldn’tbehappier.Theykeepimprovingtheframeworkinmeaningfulwaysonaregularbasis.Itfeelsverymuchalive.MatthiasSchmidtProgrammerGettingbuy-inonTailwindCSSfromourentireteamofdeveloperstooksometimeanddiscussion,butonceweimplementedcompanywide,ithasmadeitabreezeforanydevelopertojumpintoanyprojectandquicklymakechanges/enhancements.JerredHurstCTOPrimitiveTailwindCSShasatthesametimemadeCSSenjoyableanddrasticallychangedhowIbuildoutproducts.It'srapid,efficientandanabsolutejoytoworkwith.BraunsonYagerFullStackDeveloper&DesignerUsinganyCSSframeworkotherthanTailwindseemslikeastepbackwardinwebdevelopmentatthispoint.AbsolutelynothingelsecomesclosetomakingmeasproductiveduringthedesignphaseofdevelopmentthanTailwind.ZacJordanZajdelDeveloperTailwindhascompletelyrevolutionizedourdevopspipeline.TheCLIworksconsistentlynomatterwhatframeworkisinplace.JoelVartyPresident&[email protected],“okay,howgoodcanapairofsocksbe”.Thenyouputsocksonandyouarelike“%@#!thesearesocks”.NeilDochertySoftwareEngineerTailwindunifiedourcssworkacrossdifferentclientprojectsmorethananyothermethodology,whilelettinguskeepourbespokedesigns,andevenimprovedperformanceandstabilityofoursites.SørenKottalDeveloperTailwindistheonlywaytoworkwithCSSatscale.AaronFrancisDeveloperTailwindCSShassingle-handedlybeenthebiggestandmostimpactfulchangeforourteam'sdevelopmentworkflow.I'mgladIliveinauniversewhereTailwindexists.SanjaySoundarajanFront-EndDeveloperTailwindsolvesacomplexprobleminanelegantway.Itprovidesaready-to-useUI,allwhilenotcompromisingonenablingdeveloperstoquicklybuildanythingimaginable.BrentGarnerDeveloperSkiptotheend.Use@tailwindcss.KentC.DoddsDeveloperandEducatorIwasbadatfront-enduntilIdiscoveredTailwindCSS.IhavelearntalotmoreaboutdesignandCSSitselfafterIstartedworkingwithTailwind.Creatingwebpagesis5xfasternow.ShrutiBalasaFullStackWebDeveloper&TechEducatorIdon'tuseitbutifIwouldusesomethingI'duseTailwind!PieterLevelsMakerWithTailwindIcanoffermyclientsfasterturnaroundtimesoncustomWordPressthemes,bothforinitialbuildsandforfuturerevisions.GregSullivanWordPressDeveloperThanksto@tailwindcss,CSSstartedtomakesensetome.NunoMaduroCoreTeamMember@laravelphpTailwindclickedformealmostimmediately.Ican'tpicturemyselfwritinganotherBEMclasseveragain.Happyusersincethefirstpublicrelease!Productivityisatanalltimehigh,thanksto@tailwindcss.IgorRandjelovicDeveloperCSShasalwaysbeenthehardestpartofofferingadigitalservice.Itmademefeellikeabaddeveloper.Tailwindgivesmeconfidenceinwebdevelopmentagain.Theirdocsaremyfirstportofcall.DanMaloneFounderof@mawla_ioIthought"WhywouldIneedTailwindCSS?IalreadyknowCSSanduseBootstrap",butaftergivingitatryIdecidedtoswitchallmyprojectstoTailwind.SergioPerisDevOpsEngineer&NetworkAdministratorTheTailwinddocsareitsrealmagic.ItisactuallybetterdocumentedthanCSSitself.It’ssuchapleasuretouse.ZachKnickerbockerDeveloperI'veneverfeltmoreconfidentdesigningandstylingwebsitesandwebappsthanwhenI'veusedTailwindCSS.GlennMeyerDeveloperTrieditonce,neverlookedback.Tailwindcssconvertsince0.7anditjustkeepsgettingbetterandbetter.JanD'HollanderFront-EndDeveloperIfyouworkatanagencyanddealwithhundredsofuniquesites,eachofthemhavingtheirowncustomCSSisanightmare.DoyourfutureselfafavoranduseTailwind!AndrewBrownBeforeTailwindCSSIwasbangingmyheadagainstthewalltryingtomakesenseofmyCSSspaghetti.NowIambangingmyheadagainstthewallwonderingwhyIdidn’ttryitearlier.Myheadhurtsandmywallhasabigholeinit.ButatleastusingCSSispleasantagain!MarcKöhlbruggeIwasskepticalatfirstandresistedforalongtimebutafterdoingthefirstprojectswithTailwindCSSthisyear,normalCSSjustfeelswrongandslow.DavidHellmannDigitalDesigner&DeveloperAfterusingTailwindforthefirsttime,IwonderedwhyIusedanythingelse.It'snowmygo-toCSSframeworkforanyapplication,productionorprototype.JoshuaLoweDeveloperTailwindnotonlymademeabletofocusonbuildinggreatUI’sbutitalsoimprovedmyoverallCSSskillsbyhavingsuchawonderfuldocssitewhenIneededtohandwriteCSS.JoshMandersDeveloperUsingTailwindisanaccelerantforrapidprototypingdesignsystems.Strongdocumentation,helpfulcommunity,andinstantresults.IanGaenssleyDesignOperationsLeadatBetterCloudIinstinctivelyhatedutilityCSS,butTailwindcompletelyconvertedme.Itreignitedmyexcitementforfront-enddevelopmentandimplementingcustomdesigns!JessArcherFull-StackDeveloperTailwindCSSbridgesthegapbetweendesignanddevmorethananythingelse.Itreintroducescontexttodevelopment,limitscognitiveloadwithchoicearchitecture,grantsaccesstoatokenlibraryoutoftheboxandisincrediblyeasytopickup.Ithelpedmydesigncareersomuch.CoreyGinnivanCo-FounderofFeatureBoardWhenI'mworkingonaprojectthatisn'tusingTailwind,firstIyell,thenItakeadeepbreath,thenIrunnpminstalltailwindcss.RyanChenkieGoingbacktoalargewebsitethatdoesn'tuseTailwindislikehoppingoutofaTeslaandintomydad'srustedMinnesotafarmtruck.Sure,itworks,buttheclutchisslipping,thebrakesbarelywork,andit'sfilledwitholdtireswe'renotevenusinganymore.DanGayleSeniorFront-EndDeveloper@CrateandBarrelIpushedbackhardatthementionofTailwindinitiallyduetothenumberofclassesinmycodehoweverwithin5minutesorusingitIwashookedandnowamtheannoyingguypushingTailwindonanyonewhowilllisten.Ithassimplifiedmydevworkflowbeyondmeasurement.DanBrookingHeadEngineer@SubscriptionBoxIneverbotheredtolearnvanillaCSSbecauseit’sawasteoftime—whybotherwhenIhaveTailwindinstead?TurnsoutIlearnedatonofCSSanywayjustbyusingTailwind.It’ssuchaperfectmiddlegroundbetweenthoughtfulabstraction,whilestilllettingyoubreakfree.TrevorCampbellTailwindandtheecosystemarounditislikeagiantturbochargerforwebagencies.Ithelpsteamsofdevelopersanddesignersdevelopasharedlanguageandsystemofconstraintsthatspeedsuptheentireprocess.It'sagame-changerforefficientteamwork.JeffSagalFull-StackDeveloperTailwindprovidesthestyleofbespokedesign,theconstraintofadesignsystem,andtheflexibilitytomakeitinfinitelycustomizable,withoutbeingshoehornedintomakingeverywebsitelooklikeitwascutfromthesamecloth.MichaelDyryndaAustralianTailwindcompletelychangedmyfreelancecareerbyallowingmetobuildoutcompletelycustomdesignsreallyfastwithoutwritinganyCSS.JasonBeggsFront-EndDeveloperUsingTailwindCSSwillmakeyoufeellikeyoujustunlockedacheatcode.DavidPaluyCTO@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-36123456789101112131415161718192021222324252627w-96w-80w-72w-64w-60w-56w-52w-48BuildanythingBuildwhateveryouwant, seriously.BecauseTailwindissolow-level,itneverencouragesyoutodesignthesamesitetwice.Evenwiththesamecolorpaletteandsizingscale,it'seasytobuildthesamecomponentwithacompletelydifferentlookinthenextproject.Getstarted,installationSimplePlayfulElegantBrutalist1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 ClassicUtilityJacket $110.00 Instock XS S M L XL Buynow Addtobag FreeshippingonallcontinentalUSorders.

PerformanceIt’stiny—nevershipunusedCSSagain.TailwindautomaticallyremovesallunusedCSSwhenbuildingforproduction,whichmeansyourfinalCSSbundleisthesmallestitcouldpossiblybe.Infact,mostTailwindprojectsshiplessthan10kBofCSStotheclient.Learnmore,optimizingforproductionindex.htmltailwind.config.jspackage.json123456789101112

13build.css1Terminalnpxtailwindcss-o--outputbuild.css--contentindex.html-w--watchMobile-firstResponsiveeverything.WrestlingwithabunchofcomplexmediaqueriesinyourCSSsucks,soTailwindletsyoubuildresponsivedesignsrightinyourHTMLinstead.Throwascreensizeinfrontofliterallyanyutilityclassandwatchitmagicallyapplyataspecificbreakpoint.Learnmore,responsivedesignsmmdlgxl2xlworkcation.comTailwindUI-OfficialTailwindCSSComponentsWorkcation-FindatripthatsuitsyouHeadlessUI–Unstyled,fullyaccessibleUIcomponents12345678910111213141516171819202122232425262728293031323334353637383940BeachHouseinCollingwoodEntirehouse

Reviews4.89(128)LocationCollingwood,OntarioCheckavailabilityThissunnyandspaciousroomisforthosetravelinglightandlookingforacomfyandcosyplacetolaytheirheadforanightortwo.Thisbeachhousesitsinavibrantneighborhoodlitteredwithcafes,pubs,restaurantsandsupermarketsandisclosetoallthemajorattractionssuchasEdinburghCastleandArthur'sSeat.StatevariantsHoverandfocusstates?Wegot ’em.Wanttostylesomethingonhover?Stickhover:atthebeginningoftheclassyouwanttoadd.Worksforfocus,active,disabled,focus-within,focus-visible,andevenfancystatesweinventedourselveslikegroup-hover.Learnmore,handlinghover,focus,andotherstatesTitleAPIIntegrationCategoryEngineeringUsersTitleNewBenefitsPlanCategoryHumanResourcesUsersTitleOnboardingEmailsCategoryCustomerSuccessUsersNewproject12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

ProjectsNew

Title{project.title}

Category{project.category}

UsersNewproject

Component-drivenWorriedaboutduplication?Don’t be.Ifyou'rerepeatingthesameutilitiesoverandoverandoveragain,allyouhavetodoisextractthemintoacomponentortemplatepartialandboom—you'vegotasinglesourceoftruthsoyoucanmakechangesinoneplace.Learnmore,reusingstylesReactVueAngularBladeNewReleasesTopRatedVincent’sPicksPrognosisNegativeStarrating2.66RatingPG-13Year2021GenreComedyRuntime1h46mCastSimonPegg,ZachGalifianakisRochelle,RochelleStarrating3.25RatingRYear2020GenreRomanceRuntime1h56mCastEmiliaClarkeDeathBlowStarrating4.95Rating18AYear2020GenreActionRuntime2h5mCastIdrisElba,JohnCena,ThandiweNewtonMovies.jsNav.jsNavItem.jsList.jsListItem.js12345678910111213141516171819202122importNavfrom'./Nav.js' importNavItemfrom'./NavItem.js' importListfrom'./List.js' importListItemfrom'./ListItem.js' exportdefaultfunctionMovies({movies}){ return( {movies.map((movie)=>( ))} ) } Notintocomponentframeworks?UseTailwind'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.html313233343536373839DeclineAcceptDarkmodeNowwithDark Mode.Don’twanttobeoneofthosewebsitesthatblindspeoplewhentheyopenitontheirphoneat2am?Enabledarkmodeinyourconfigurationfilethenthrowdark:infrontofanycolorutilitytoapplyitwhendarkmodeisactive.Worksforbackgroundcolors,textcolors,bordercolors,andevengradients.Learnmore,darkmodeDisabledarkmode Ep.128 ScalingCSSatHerokuwithUtilityClasses FullStackRadio 24:16 75:50 1x 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 Ep.128 ScalingCSSatHerokuwithUtilityClasses FullStackRadio 24:16 75:50 1x CustomizationExtendit,tweakit,change it.Tailwindincludesanexpertlycraftedsetofdefaultsout-of-the-box,butliterallyeverythingcanbecustomized—fromthecolorpalettetothespacingscaletotheboxshadowstothemousecursor.Usethetailwind.config.jsfiletocraftyourowndesignsystem,thenletTailwindtransformitintoyourowncustomCSSframework.Learnmore,configurationSimplePlayfulElegantBrutalistTypographyCSSclassfont-displayFontnameInterSampleAaBbCcCSSclassfont-bodyFontsize14ptSampleLoremipsumdolorsitamet,consecteturadipiscingelit.Utauguegravidacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegravidacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegravidacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegravidacrasquisacduispretiumullamcorperconsequat.Integerpellentesqueeu.Loremipsumdolorsitamet,consecteturadipiscingelit.Utauguegravidacrasquisacduispretiumullamcorperconsequat.ColorsCSSclassprefixbg-primaryRange50-900SampleCSSclassprefixbg-secondaryRange50-900Sample1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 module.exports={ theme:{ fontFamily:{ display:['Inter','system-ui','sans-serif'], body:['Inter','system-ui','sans-serif'], }, colors:{ primary:{ 50:'#eff6ff', 100:'#dbeafe', 200:'#bfdbfe', 300:'#93c5fd', 400:'#60a5fa', 500:'#3b82f6', 600:'#2563eb', 700:'#1d4ed8', 800:'#1e40af', 900:'#1e3a8a', }, secondary:{ 50:'#f8fafc', 100:'#f1f5f9', 200:'#e2e8f0', 300:'#cbd5e1', 400:'#94a3b8', 500:'#64748b', 600:'#475569', 700:'#334155', 800:'#1e293b', 900:'#0f172a', }, }, }, } ModernfeaturesCutting-edgeisourcomfort zone.Tailwindisunapologeticallymodern,andtakesadvantageofallthelatestandgreatestCSSfeaturestomakethedeveloperexperienceasenjoyableaspossible.We'vegotfirst-classCSSgridsupport,composabletransformsandgradientspoweredbyCSSvariables,supportformodernstateselectorslike:focus-visible,andtonsmore.Learnmore,gridtemplatecolumnsCSSGridTransformsFilters123456789101112131415161718

EditortoolsWorld-classIDEintegration.Worriedaboutrememberingalloftheseclassnames?TheTailwindCSSIntelliSenseextensionforVSCodehasyoucovered.Getintelligentautocompletesuggestions,linting,classdefinitionsandmore,allwithinyoureditorandwithnoconfigurationrequired.Learnmore,editorsetup123456789101112131415161718192021222324 JaneCooper Admin RegionalParadigmTechnician Email Problems'flex'appliesthesameCSSpropertyas'block'. cssConflict[1,20]'block'appliesthesameCSSpropertyas'flex'. cssConflict[1,54]Ready-madecomponentsMoveevenfasterwithTailwind UI.TailwindUIisacollectionofbeautiful,fullyresponsiveUIcomponents,designedanddevelopedbyus,thecreatorsofTailwindCSS.It'sgothundredsofready-to-useexamplestochoosefrom,andisguaranteedtohelpyoufindtheperfectstartingpointforwhatyouwanttobuild.Learnmore