Tailwind CSS 中文文档- 无需离开您的HTML，即可快速建立 ...

Tailwind CSS 是一个功能类优先的CSS 框架，它由Adam Wathan 创建。

本站提供Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握 ... “最佳实践”实际上并不起作用。

我曾经写过几千字的文章来说明为什么传统的“语义化类名”是CSS难以维护的原因，但事实是除非您实际尝试过，您永远不会相信我。

如果您能抑制住想吐槽的冲动，给它一个机会，我真的觉得您会怀疑您是怎么用其他方式来使用CSS 的。

AdamWathanTailwindCSS创始人我直到现在才开始使用TailwindCSS，真是个白痴。

RyanFlorenceRemix&ReactTrainingOriginaltweetbyRyanFlorence如果我今天不得不推荐一种编程方法，那就是使用TailwindCSS的HTML+CSS。

GuillermoRauchVercelOriginaltweetbyGuillermoRauch我没有任何设计技能，但使用Tailwind可以轻松创建美观的网站，而这正是我在CSS框架中想要的一切。

SaraVieiraCodeSandboxIstartedusing@tailwindcss.Iinstantlyfellinlovewiththeirresponsivemodifiers,thoroughdocumentation,andhoweasyitwascustomizingcolorpalettes.DaceyNolan软件工程师OriginaltweetbyDaceyNolanLovedittheverymomentIusedit.GilbertRabutTsurwa网页设计师OriginaltweetbyGilbertRabutTsurwa我刚开始接手我的工作的时候很好奇为什么上一个开发者在我们的项目中使用了Tailwind，但几天之内，我便开始在我所有的个人项目中使用Tailwind了。

MadelineCampbell全栈开发人员OriginaltweetbyMadelineCampbellThere’sonethingthatsucksabout@tailwindcss-onceyou’veuseditonahandfulofprojectsitisarealpainintheasstowritenormalCSSagain.GraemeHoustonJavaScript开发人员OriginaltweetbyGraemeHoustonOkay,I’mofficially*all*inonthe@tailwindcsshypetrain.Neverthoughtbuildingwebsitescouldbesoridiculouslyfastandflexible.AaronBushnellProgrammer@TrendyMindsOriginaltweetbyAaronBushnell使用CSS已有十多年了，Tailwind使我的生活更加轻松。

它仍然是CSS，您可以使用flex，grid等，但是编写和维护起来更快。

DebbieO'[email protected]'Brien好的，@tailwindcss震惊了我，现在我感觉就像是个白痴。

Okay,@tailwindcssjustclickedformeandnowIfeellikea#!@%&$%idiot.KenWheelerReact工程师OriginaltweetbyKenWheeler过去几个月我一直在使用@tailwindcss，真是太神奇了。

我之前已经使用过一些功能类，但Tailwind是功能类优先的最正确的方式。

JadLimcaco设计师OriginaltweetbyJadLimcaco在过去的两周中终于在实际的客户端项目上使用@tailwindcss之后，我再也不想手动编写CSS了。

我是一个怀疑论者，但这想法是真实的。

LukeRedpathRuby&iOS开发者OriginaltweetbyLukeRedpath我不认为我会喜欢@tailwindcss...但花了一天时间将其用于POC后，我开始喜欢它！我希望当我们启动公司设计系统时就已经意识到这个问题，并认真考虑进行彻底的重建。

JonBloomer前端开发人员OriginaltweetbyJonBloomer起初@tailwindcss看起来很不愉快，但是现在我迷上了它。

AndrewGilliland前端开发人员OriginaltweetbyAndrewGilliland基于约束设计系统的API。

功能类可以帮助您在系统的约束下工作，而不是在您的样式表中堆满任意的值。

它们可以让您轻松地在颜色选择、间距、排版、阴影以及其他一切构成一个精心设计的系统的元素上保持一致。

了解更多->SizingColorTypographyShadowsWidthw-64w-56w-48w-40w-32w-24w-20w-16w-12w-10123456789101112131415161718192021222324252627282930313233

构建任何东西构建您想要的任何东西。

由于Tailwind是非常底层的，因此它从不鼓励您设计相同的站点。

即使使用相同的调色板和大小比例，也可以轻松的在下个项目中为同一个组件设计出完全不同的外观。

开始->SimplePlayfulElegantBrutalist12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 ClassicUtilityJacket $110.00 Instock XS S M L XL SizeGuide Buynow Addtobag FreeshippingonallcontinentalUSorders.

性能生产环境的体积非常小。

TailwindautomaticallyremovesallunusedCSSwhenbuildingforproduction,whichmeansyourfinalCSSbundleisthesmallestitcouldpossiblybe.Infact,mostTailwindprojectsshiplessthan10kBofCSStotheclient.了解更多->Productionbuild2,413.4kBPurged0unusedclasses-0linesfixedflex-colrounded-smshadowpx-4justify-contenttext-centerflex-shrink-0md:text-lefth-16w-16md:h-24md:w-24rounded-fullmx-autotext-lgtext-purple-500md:text-lefttext-gray-600text-green-400text-blue-500rounded-pillp-4max-w-screen-xlmt-5leading-7whitespace-nowrapsm:gap-6lg:max-w-4xllg:mx-autoxl:max-w-noneflex-1xl:mx-0xl:grid-cols-4borderborder-gray-200text-4xlleading-6leading-10font-extraboldleading-5h-5w-5text-green-500text-5xlleading-nonefont-extraboldtext-whitetracking-tightborder-ttext-smborder-indigo-600py-4font-mediumpx-5flexitems-centerspace-x-3text-baseleading-6text-whiteabsoluteright-fullml-4bottom-0transform-translate-x-1/2py-3mx-4w-fullduration-150h-fulltransitionpy-0pl-4pr-8border-transparentbg-transparenttext-gray-500px-5py-3appearance-noneunderlinebg-indigo-700min-w-fulldivide-ydivide-gray-200items-baselinetext-indigo-600hover:text-indigo-50012345678910111213141516171819202122232425262728293031 Successfullysaved! Anyonewithalinkcannowviewthisfile. 移动优先一切皆是响应式的。

在您的CSS中使用大量复杂的媒体查询非常糟糕，因此Tailwind可以让您直接在HTML中构建响应式的设计。

在功能类前面加上屏幕大小标记，就可以查看在指定断点处的神奇表现。

了解更多->workcation.com Entirehouse BeachHouseinCollingwood 4.94 (128) · Collingwood,Ontario HostedbyKevinFrancis Checkavailability 1234567891011121314151617181920212223242526272829303132333435363738394041EntirehouseBeachHouseinCollingwood4.94(128)·

Collingwood,Ontario

HostedbyKevinFrancisCheckavailability状态变体支持hover和focus 状态想要设置hover样式吗？在您想要添加的类前面添加hover:。

可以这样使用的状态还有focus、active、disabled、focus-within、focus-visible、甚至还有像group-hover这样的我们自己创造的复杂的状态。

学习更多->TitleAPIIntegrationCategoryEngineeringUsersTitleNewBenefitsPlanCategoryHumanResourcesUsersTitleOnboardingEmailsCategoryCustomerSuccessUsersNewProject12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849ProjectsNew

Title{item.title}

Category{item.category}

UsersNewProject组件驱动担心复用性问题？大可不必如果您在一遍又一遍的重复着相同的功能类，那么您最好将他们提取到一个组件或者模板片断，这样就会得到一个单一的源文件，因此可以在一个地方对他们修改。

了解更多->ReactVueBladeFeaturedPopularRecentHank’sJuiciestBeefBurgerRating4.94Time20mDifficulty·EasyServings·4servingsByHankDouglasSouthernFriedChickenSandwichRating4.94Time30mDifficulty·IntermediateServings·4servingsByNicholasDenverLily’sHealthyBeefBurgerRating4.94Time20mDifficulty·EasyServings·6servingsByLilyFordRecipes.jsNav.jsNavItem.jsList.jsListItem.jsRecipes.jsNav.jsNavItem.jsList.jsListItem.js12345678910111213141516171819202122importNavfrom'./Nav.js' importNavItemfrom'./NavItem.js' importListfrom'./List.js' importListItemfrom'./ListItem.js' exportdefaultfunctionRecipes({recipes}){ return( {recipes.map((recipe)=>( ))} ) } 想保持原来的使用习惯而不是组件框架模式？使用Tailwind的@apply指令，复制和粘贴那些类名列表，就可以把重复的功能类抽取到一个自定义的CSS类中。

了解更多->Weeklyone-on-oneDateandtimeThuNov15,202010:00am-11:00amESTLocationKitchener,ONDescriptionNomeetingdescriptionAttendeesAndrewParsonsDeclineAcceptstyles.css123456789101112.btn{ @applytext-basefont-mediumrounded-lgp-3; } .btn--primary{ @applybg-rose-500text-white; } .btn--secondary{ @applybg-gray-100text-black; } index.html313233343536373839DeclineAccept深色模式支持深色模式Don’twanttobeoneofthosewebsitesthatblindspeoplewhentheyopenitontheirphoneat2am?Enabledarkmodeinyourconfigurationfilethenthrowdark:infrontofanycolorutilitytoapplyitwhendarkmodeisactive.Worksforbackgroundcolors,textcolors,bordercolors,andevengradients.了解更多->Enabledarkmode Ep.128 ScalingCSSatHerokuwithUtilityClasses FullStackRadio 24:16 75:50 1.0x 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 Ep.128 ScalingCSSatHerokuwithUtilityClasses FullStackRadio

24:16

75:50

1.0x 定制化易于扩展、调整和改变。

Tailwind包含一组精心设计的开箱即用的默认值，但实际上，所有内容都可定制，比如调色板、间距比例、盒子阴影以及鼠标光标样式。

使用tailwind.config.js文件构建您自己的设计系统，然后让Tailwind将其转换成您自己的定制CSS框架。

了解更多->SimplePlayfulElegantBrutalistTypographyfont-displayInterfont-bodyLoremipsumdolorsitamet,consecteturadipiscingelit.Miultricesnonpharetra,erosenim.Habitantsuspendisseultricies.Colorbg-primary-{50-900}bg-gray-{50-900}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 module.exports={ theme:{ fontFamily:{ display:['Inter','system-ui','sans-serif'], body:['Inter','system-ui','sans-serif'], }, colors:{ primary:{ 50:'#eef2ff', 100:'#e0e7ff', 200:'#c7d2fe', 300:'#a5b4fc', 400:'#818cf8', 500:'#6366f1', 600:'#4f46e5', 700:'#4338ca', 800:'#3730a3', 900:'#312e81', }, gray:{ 50:'#fafafa', 100:'#f4f4f5', 200:'#e4e4e7', 300:'#d4d4d8', 400:'#a1a1aa', 500:'#71717a', 600:'#52525b', 700:'#3f3f46', 800:'#27272a', 900:'#18181b', }, }, }, } 现代特性前沿特性带来舒服体验Tailwind具有绝对的现代性，它利用所有最新和最优秀的CSS特性为开发者带来尽可能愉悦的体验。

我们提供了一流的CSSgrid支持，由CSS变量支撑的可组合的转换和渐变色，对诸如:focus-visible等现代状态选择器的支持，以及其它更多的功能。

了解更多->CSSGridTransformsGradients12345123456789101112131415161718

1

2

3

4

5 编辑器工具世界一流的IDE集成。

担心记不住所有的类名吗？VSCode的TailwindCSS智能提示扩展涵盖了所有的类。

在编辑器内既可得到智能的自动完成建议、提示及类定义等功能，而且无需配置。

了解更多->1234567891011121314151617181920212223 JaneCooper Admin RegionalParadigmTechnician Email Problems'flex'appliesthesameCSSpropertyas'block'. cssConflict[1,20]'block'appliesthesameCSSpropertyas'flex'. cssConflict[1,54]现成的组件使用TailwindUI 加快开发速度TailwindUI是由TailwindCSS创始团队开发设计的一套精美的、完全响应式的UI组件，提供了数百个现成可用的示例供您选择，确保能帮助您找到一个构建项目的完美的起点。

了解更多->