Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网SearchNavigation中文文档组件库博客网站实例ThemeTailwind CSS on GitHub只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。本 CSS 框架本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。快速入门Quick search...1
10
11
12
13
14
15
16
17
18
19
20
21
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>
“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.” Sarah DayanStaff Engineer, Algolia“最佳实践”实际上没有用。我曾经撰写了 数千字的文章 来解释为什么传统的“语义化命名”是 CSS 很难维护的原因， 但现实是，在你真正遇到问题之前你是永远不会相信我的。如果你 能忍住放弃的冲动来尝试这个框架的话，我相信 你会后悔自己为什么曾经用其他的方式写 CSS。Adam WathanTailwind CSS 创始人TestimonialsI feel like an idiot for not using Tailwind CSS until now.Ryan FlorenceRemix & React TrainingIf I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS.Guillermo RauchVercelI have no design skills and with Tailwind I can actually make good looking websites with ease and it's everything I ever wanted in a CSS framework.Sara VieiraCodeSandboxTailwind CSS is the greatest CSS framework on the planet.Bret "The Hitman" HartFormer WWE ChampionI started using @tailwindcss. I instantly fell in love with their responsive modifiers, thorough documentation, and how easy it was customizing color palettes.Dacey NolanSoftware EngineerLoved it the very moment I used it.Gilbert Rabut TsurwaWeb DeveloperThere’s one thing that sucks about @tailwindcss - once you’ve used it on a handful of projects it is a real pain in the ass to write normal CSS again.Graeme HoustonJavaScript DeveloperOkay, I’m officially *all* in on the @tailwindcss hype train. Never thought building websites could be so ridiculously fast and flexible.Aaron BushnellProgrammer @ TrendyMindsOkay, @tailwindcss just clicked for me and now I feel like a #!@%&$% idiot.Ken WheelerReact EngineerI've been using @tailwindcss the past few months and it's amazing. I already used some utility classes before, but going utility-first... this is the way.Jad LimcacoDesignerAfter finally getting to use @tailwindcss on a real client project in the last two weeks I never want to write CSS by hand again. I was a skeptic, but the hype is real.Luke RedpathRuby & iOS DeveloperI didn't think I was going to like @tailwindcss... spent a day using it for a POC, love it! I wish this had been around when we started our company design system, seriously considering a complete rebuildJon BloomerFront-End Developer@tailwindcss looked unpleasant at first, but now I’m hooked on it.Andrew GillilandFront-End DeveloperOnce you start using tailwind, there is no going back.Praveen KumarI use @tailwindcss for every single project because it removes most of the annoyances of css and is multiple times quickerVasu BansalIt's changed the trajectory of my business. I'm able to design better looking, better performing, and more accessible components in 1/3 of the time.Dennis WalshMy first tailwind project worked great but what really kicked ass was going back to it months later and saving so much time making new changes. I knew how everything fit together instantly.Eric L. BarnesTailwind looked like pure spaghetti until I used it in a real project. Now it's the only way I make websites. Simple, fast, scalable.Nick SaraevTailwind is a classic example of why you need to put preconceptions aside when evaluating tech. The experience and productivity is streets ahead of what you might have believed based on old school CSS thinking!Luke BennettTailwind CSS is a framework like no other. Rather than constraining you to a set design, it gives you the tools and the standardization to build exactly what you want.Sam CarréI remember being horrified the first time I saw utility first css. But these past months using Tailwind on an increasing number of projects has just been a joyful new way to build things on the web.Evan PayneI was initially skeptical as I began using @tailwindcss, until I now needed to copy a @sveltejs component to a different location and I didn't need to worry about any of my styles breaking.Rotimi Best@tailwindcss makes you better at CSS. Change my mind.Kelvin OmereshoneAwesome stuff! I'm no designer or front-end developer; until I found Tailwind last year I hadn't done any CSS since the early nineties. Tailwind, and Tailwind UI mean I can now create good looking front ends quickly, which is super empowering. Crazy impressive project.John W ClarkeI admit I was a big skeptic of @tailwindcss until last year. I thought "why would I ever type a million classes that just abstract single CSS properties?" By now, I feel like I'm twice as productive when building UIs. It's really amazing.Sumit KumarI'm nearing completion on my months-long project of rewriting my company's frontend in TypeScript and @tailwindcss. Still, every time I re-implement a component, I think, "Wow, that was way easier this time." Tailwind rocks.Mannie SchumpertCo-Founder/CTO @LaunchPathIncWith the amount of shipping we have to do, skipping the conversion of brainwaves to CSS, and being able to implement at the speed of thought using Tailwind, my life as a fullstack developer has never been more blissful.Christian HolmanTailwind makes it easy to bring new developers into the frontend project without having to worry about the mental exercise of understanding ‘some’ developer’s class hierarchy and thought process behind it.Jilson ThomasUI Designer/DeveloperTailwind has been a total game-changer for our dev team. It allows us to move faster, keep our UI consistent, and focus on the work we want to do instead of writing CSS.Jake Ryan SmithFull-Stack DeveloperHave been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex, grid, etc. but just quicker to write and maintain.Debbie O'BrienSenior Program Manager at MicrosoftI’ve been writing CSS for over 20 years, and up until 2017, the way I wrote it changed frequently. It’s not a coincidence Tailwind was released the same year. It might look wrong, but spend time with it and you’ll realize semantic CSS was a 20 year mistake.Ben FurfieDeveloperTailwind makes writing code feel like I’m using a design tool.Didier CatzCo-Founder @StyptAppTailwind CSS is bridging the gap between design systems and products. It’s becoming the defacto API for styling.Sarah DayanStaff Software Engineer @AlgoliaI never want to write regular CSS again. Only @tailwindcss.Trey PiepmeierWeb DeveloperI came into my job wondering why the last dev would ever implement Tailwind into our projects, within days I was a Tailwind convert and use it for all of my personal projects.Madeline CampbellFull-Stack DeveloperTailwind made me enjoy frontend development again and gave me the confidence that I can realize any design - no matter how complex it may be.Marcel PociotCTO at @beyondcodeTailwind turned me into a complete stack developer.Boris LepikhinFull-Stack DeveloperTailwind is the easiest and simplest part of any project I work on. I can't imagine I'll build anything big without it.Christopher PittDeveloperTailwind CSS has alleviated so many problems we've all become accustomed to with traditional CSS that it makes you wonder how you ever developed websites without it.Chase GiuntaDeveloperHaving used other CSS frameworks, I always come back to Tailwind CSS as it gives me the ability to create a consistent and easy to use design system in my projects. Thanks to Tailwind CSS I only need one cup of coffee to get started on a new project.Ivan GuzmanSoftware EngineerI’ve been using Tailwind CSS for many years, and yet they seem to still amaze us every year with the updates. It’s aided me in building websites super quickly, I could never go back to boring old CSS classes!Charlie JosephDeveloperTailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box. It integrates well with any web dev framework because it‘s just CSS! Genius.Kahlil LecheltJavaScript DeveloperIt’s super simple to slowly migrate to Tailwind from e.g. Bootstrap by using its prefix feature. Benefiting from its features while not having to spend a lot of time upfront is amazing!Marco SinghofFull-Stack DeveloperI wasn’t comfortable using CSS until I met Tailwind. Its easy to use abstraction combined with excellent documentation are a game changer!Joost MeijlesHead of Unplatform @avivasolutionsTailwind turns implementing designs from a chore to a joy. You'll fall in love with building for the web all over again.Matt SwansonDeveloperTailwind CSS helps you eject from the complexity of abstracting styles away. Having styles right there in your HTML is powerful, which gets even more obvious when using products like Tailwind UI.Matija MarohnićFront-End DeveloperIf Tailwind is like Tachyons on steroids, Tailwind UI is like Lance Armstrong winning the Tour de France (seven times). Without, of course, the scandal and shame.Hugh DurkinDeveloperBeing burned by other abandoned CSS frameworks, my biggest fear was to bet on yet another framework that may disappear. However, I gave it a try and couldn’t be happier. They keep improving the framework in meaningful ways on a regular basis. It feels very much alive.Matthias SchmidtProgrammerGetting buy-in on Tailwind CSS from our entire team of developers took some time and discussion, but once we implemented company wide, it has made it a breeze for any developer to jump into any project and quickly make changes/enhancements.Jerred HurstCTO PrimitiveTailwind CSS has at the same time made CSS enjoyable and drastically changed how I build out products. It's rapid, efficient and an absolute joy to work with.Braunson YagerFull Stack Developer & DesignerUsing any CSS framework other than Tailwind seems like a step backward in web development at this point. Absolutely nothing else comes close to making me as productive during the design phase of development than Tailwind.Zac Jordan ZajdelDeveloperTailwind has completely revolutionized our devops pipeline. The CLI works consistently no matter what framework is in place.Joel VartyPresident & CTO @agilitycmsTailwind is like a really nice pair of socks. You think, “okay, how good can a pair of socks be”. Then you put socks on and you are like “%@#! these are socks”.Neil DochertySoftware EngineerTailwind unified our css work across different client projects more than any other methodology, while letting us keep our bespoke designs, and even improved performance and stability of our sites.Søren KottalDeveloperTailwind is the only way to work with CSS at scale. Aaron FrancisDeveloperTailwind CSS has single-handedly been the biggest and most impactful change for our team's development workflow. I'm glad I live in a universe where Tailwind exists.Sanjay SoundarajanFront-End DeveloperTailwind solves a complex problem in an elegant way. It provides a ready-to-use UI, all while not compromising on enabling developers to quickly build anything imaginable.Brent GarnerDeveloperSkip to the end. Use @tailwindcss.Kent C. DoddsDeveloper and EducatorI was bad at front-end until I discovered Tailwind CSS. I have learnt a lot more about design and CSS itself after I started working with Tailwind. Creating web pages is 5x faster now.Shruti BalasaFull Stack Web Developer & Tech EducatorI don't use it but if I would use something I'd use Tailwind!Pieter LevelsMakerWith Tailwind I can offer my clients faster turnaround times on custom WordPress themes, both for initial builds and for future revisions.Greg SullivanWordPress DeveloperThanks to @tailwindcss, CSS started to make sense to me.Nuno MaduroCore Team Member @laravelphpTailwind clicked for me almost immediately. I can't picture myself writing another BEM class ever again. Happy user since the first public release! Productivity is at an all time high, thanks to @tailwindcss.Igor RandjelovicDeveloperCSS has always been the hardest part of offering a digital service. It made me feel like a bad developer. Tailwind gives me confidence in web development again. Their docs are my first port of call.Dan MaloneFounder of @mawla_ioI thought "Why would I need Tailwind CSS? I already know CSS and use Bootstrap", but after giving it a try I decided to switch all my projects to Tailwind.Sergio PerisDevOps Engineer & Network AdministratorThe Tailwind docs are its real magic. It is actually better documented than CSS itself. It’s such a pleasure to use.Zach KnickerbockerDeveloperI've never felt more confident designing and styling websites and web apps than when I've used Tailwind CSS.Glenn MeyerDeveloperTried it once, never looked back. Tailwindcss convert since 0.7 and it just keeps getting better and better.Jan D'HollanderFront-End DeveloperIf you work at an agency and deal with hundreds of unique sites, each of them having their own custom CSS is a nightmare. Do your future self a favor and use Tailwind!Andrew BrownBefore Tailwind CSS I was banging my head against the wall trying to make sense of my CSS spaghetti. Now I am banging my head against the wall wondering why I didn’t try it earlier. My head hurts and my wall has a big hole in it. But at least using CSS is pleasant again!Marc KöhlbruggeI was skeptical at first and resisted for a long time but after doing the first projects with Tailwind CSS this year, normal CSS just feels wrong and slow.David HellmannDigital Designer & DeveloperAfter using Tailwind for the first time, I wondered why I used anything else. It's now my go-to CSS framework for any application, production or prototype.Joshua LoweDeveloperTailwind not only made me able to focus on building great UI’s but it also improved my overall CSS skills by having such a wonderful docs site when I needed to handwrite CSS.Josh MandersDeveloperUsing Tailwind is an accelerant for rapid prototyping design systems. Strong documentation, helpful community, and instant results.Ian GaenssleyDesign Operations Lead at BetterCloudI instinctively hated utility CSS, but Tailwind completely converted me. It reignited my excitement for front-end development and implementing custom designs!Jess ArcherFull-Stack DeveloperTailwind CSS bridges the gap between design and dev more than anything else. It reintroduces context to development, limits cognitive load with choice architecture, grants access to a token library out of the box and is incredibly easy to pickup. It helped my design career so much.Corey GinnivanCo-Founder of FeatureBoardWhen I'm working on a project that isn't using Tailwind, first I yell, then I take a deep breath, then I run npm install tailwindcss.Ryan ChenkieGoing back to a large website that doesn't use Tailwind is like hopping out of a Tesla and into my dad's rusted Minnesota farm truck. Sure, it works, but the clutch is slipping, the brakes barely work, and it's filled with old tires we're not even using anymore.Dan GayleSenior Front-End Developer @CrateandBarrelI pushed back hard at the mention of Tailwind initially due to the number of classes in my code however within 5 minutes or using it I was hooked and now am the annoying guy pushing Tailwind on anyone who will listen. It has simplified my dev workflow beyond measurement.Dan BrookingHead Engineer @SubscriptionBoxI never bothered to learn vanilla CSS because it’s a waste of time — why bother when I have Tailwind instead? Turns out I learned a ton of CSS anyway just by using Tailwind. It’s such a perfect middleground between thoughtful abstraction, while still letting you break free.Trevor CampbellTailwind and the ecosystem around it is like a giant turbocharger for web agencies. It helps teams of developers and designers develop a shared language and system of constraints that speeds up the entire process. It's a game-changer for efficient teamwork.Jeff SagalFull-Stack DeveloperTailwind provides the style of bespoke design, the constraint of a design system, and the flexibility to make it infinitely customizable, without being shoehorned into making every website look like it was cut from the same cloth.Michael DyryndaAustralianTailwind completely changed my freelance career by allowing me to build out completely custom designs really fast without writing any CSS.Jason BeggsFront-End DeveloperUsing Tailwind CSS will make you feel like you just unlocked a cheat code.David PaluyCTO @QuartixEvery developer I’ve convinced to give Tailwind a try has come back and said they are never going back. Every. Single. One.Jacob GrafWeb DeveloperShow more...约束成为你的设计系统的 API。工具类（Utility classes）能够为你提供一套约束系统，避免让你的 样式表中出现随意的取值。它让颜色、 间距、排版、阴影以及一切属性的取值保持一致，并最终形成一个精心构建的设计 系统。了解更多关于工具类优先（utility-first）的基本原理SizingColorsTypographyShadowsw-96w-80w-72w-64w-60w-56w-52w-48w-64w-60w-56w-52w-48w-44w-40w-36123456789101112131415161718192021222324252627<div class="space-y-4"> <div class="w-96 bg-white shadow rounded"> w-96 </div> <div class="w-80 bg-white shadow rounded"> w-80 </div> <div class="w-72 bg-white shadow rounded"> w-72 </div> <div class="w-64 bg-white shadow rounded"> w-64 </div> <div class="w-60 bg-white shadow rounded"> w-60 </div> <div class="w-56 bg-white shadow rounded"> w-56 </div> <div class="w-52 bg-white shadow rounded"> w-52 </div> <div class="w-48 bg-white shadow rounded"> w-48 </div></div>实现你所想你所想的就能实现。真没夸张。由于 Tailwind 抽象层级较低，因此它从不鼓励将同一个设计应用到两个网站上。 即使使用相同的调色板（color palette）和尺寸设置，也能很容易地让同样的组件 具有完全不同的外观。开始安装 TailwindSimplePlayfulElegantBrutalist1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<div class="flex font-sans">
<div class="flex-none w-48 relative">
<img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
</div>
<form class="flex-auto p-6">
<div class="flex flex-wrap">
<h1 class="flex-auto text-lg font-semibold text-slate-900">
Utility Jacket
</h1>
<div class="text-lg font-semibold text-slate-500">
$110.00
</div>
<div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
In stock
</div>
</div>
<div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
<div class="space-x-2 flex text-sm">
<label>
<input class="sr-only peer" name="size" type="radio" value="xs" checked />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
XS
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="s" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="m" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="l" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="xl" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
XL
</div>
</label>
</div>
</div>
<div class="flex space-x-4 mb-6 text-sm font-medium">
<div class="flex-auto flex space-x-4">
<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
Buy now
</button>
<button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
Add to bag
</button>
</div>
<button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like">
<svg width="20" height="20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>
</button>
</div>
<p class="text-sm text-slate-700">
Free shipping on all continental US orders.
</p>
</form>
</div>
Performance体积小 - 绝不包含任何用不到的 CSS 代码。Tailwind 会在针对生产环境进行构建时自动删除所有未使用到的 CSS 代码，也就是说 你所获得的最终的 CSS 代码包的尺寸是最小的。事实上，大部分 Tailwind 项目所生成的 CSS 代码包都小于 10kB 。Learn more, optimizing for productionindex.htmltailwind.config.jspackage.json1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Document</title>7 <link rel="stylesheet" href="/build.css">8 </head>9 <body>10 <button class=""></button>11 </body>12</html>13build.css1Terminalnpx tailwindcss -o--output build.css --content index.html -w --watch移动设备优先响应式设计贯穿整个框架。在 CSS 中处理一大堆复杂的媒体查询（media queries）是很糟糕的，而 Tailwind 能够让你 在 HTML 中直接支持响应式设计。在任何工具类前面添加一个代表屏幕尺寸的前缀，然后就能看到它神奇地作用到 某个特定的断点（breakpoint）上了。了解更多关于响应式设计的内容smmdlgxl2xlworkcation.comTailwind UI - Official Tailwind CSS ComponentsWorkcation - Find a trip that suits youHeadless UI – Unstyled, fully accessible UI components12345678910111213141516171819202122232425262728293031323334353637383940<main class="py-6 px-4 sm:p-6 md:py-10 md:px-8"> <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2"> <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1"> <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1> <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p> </div> <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0"> <img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy"> <img src="/beach-house-interior-1.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> <img src="/beach-house-interior-2.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> </div> <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2"> <dt class="sr-only">Reviews</dt> <dd class="text-indigo-600 flex items-center dark:text-indigo-400"> <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500"> <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span> </dd> <dt class="sr-only">Location</dt> <dd class="flex items-center"> <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300"> <circle cx="1" cy="1" r="1" /> </svg> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true"> <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" /> <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /> </svg> Collingwood, Ontario </dd> </dl> <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4"> <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button> </div> <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400"> This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. </p> </div></main>各种状态鼠标悬停和焦点状态？也支持啊。需要对鼠标悬停的页面元素设置一些特殊的样式吗？将 hover: 前缀添加到 你所要使用的 CSS 类的名称前面即可。支持 focus、 active、disabled、 focus-within、focus-visible 以及 我们自己所创造的一些奇妙的状态，例如 group-hover。了解更多有关处理鼠标悬停、焦点以及其他状态的信息ProjectsNewTitleAPI IntegrationCategoryEngineeringUsersTitleNew Benefits PlanCategoryHuman ResourcesUsersTitleOnboarding EmailsCategoryCustomer SuccessUsersNew project12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<section> <header class="bg-white space-y-4 p-4 sm:px-8 sm:py-6 lg:p-4 xl:px-8 xl:py-6"> <div class="flex items-center justify-between"> <h2 class="font-semibold text-slate-900">Projects</h2> <a href="/new" class="hover:bg-blue-400 group flex items-center rounded-md bg-blue-500 text-white text-sm font-medium pl-2 pr-3 py-2 shadow-sm"> <svg width="20" height="20" fill="currentColor" class="mr-2" aria-hidden="true"> <path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" /> </svg> New </a> </div> <form class="group relative"> <svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 -mt-2.5 text-slate-400 pointer-events-none group-focus-within:text-blue-500" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" /> </svg> <input class="focus:ring-2 focus:ring-blue-500 focus:outline-none appearance-none w-full text-sm leading-6 text-slate-900 placeholder-slate-400 rounded-md py-2 pl-10 ring-1 ring-slate-200 shadow-sm" type="text" aria-label="Filter projects" placeholder="Filter projects..."> </form> </header> <ul class="bg-slate-50 p-4 sm:px-8 sm:pt-6 sm:pb-8 lg:p-4 xl:px-8 xl:pt-6 xl:pb-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4 text-sm leading-6"> <li x-for="project in projects"> <a :href="project.url" class="hover:bg-blue-500 hover:ring-blue-500 hover:shadow-md group rounded-md p-3 bg-white ring-1 ring-slate-200 shadow-sm"> <dl class="grid sm:block lg:grid xl:block grid-cols-2 grid-rows-2 items-center"> <div> <dt class="sr-only">Title</dt> <dd class="group-hover:text-white font-semibold text-slate-900"> {project.title} </dd> </div> <div> <dt class="sr-only">Category</dt> <dd class="group-hover:text-blue-200">{project.category}</dd> </div> <div class="col-start-2 row-start-1 row-end-3 sm:mt-4 lg:mt-0 xl:mt-4"> <dt class="sr-only">Users</dt> <dd x-for="user in project.users" class="flex justify-end sm:justify-start lg:justify-end xl:justify-start -space-x-1.5"> <img :src="user.avatar" :alt="user.name" class="w-6 h-6 rounded-full bg-slate-100 ring-2 ring-white" loading="lazy"> </dd> </div> </dl> </a> </li> <li class="flex"> <a href="/new" class="hover:border-blue-500 hover:border-solid hover:bg-white hover:text-blue-500 group w-full flex flex-col items-center justify-center rounded-md border-2 border-dashed border-slate-300 text-sm leading-6 text-slate-900 font-medium py-3"> <svg class="group-hover:text-blue-500 mb-1 text-slate-400" width="20" height="20" fill="currentColor" aria-hidden="true"> <path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" /> </svg> New project </a> </li> </ul></section>组件驱动担心冗余？不必。如果你发现一遍又一遍地重复使用同一组工具类的话，那你所需要做的是 将它们提取到一个组件或模板中，然后你就可以 将它们放到一个统一的地方就行修改了。了解更多关于样式重用的信息ReactVueAngularBladeNew ReleasesTop RatedVincent’s PicksPrognosis NegativeStar rating2.66RatingPG-13Year2021GenreComedyRuntime1h 46mCastSimon Pegg, Zach GalifianakisRochelle, RochelleStar rating3.25RatingRYear2020GenreRomanceRuntime1h 56mCastEmilia ClarkeDeath BlowStar rating4.95Rating18AYear2020GenreActionRuntime2h 5mCastIdris Elba, John Cena, Thandiwe NewtonMovies.jsNav.jsNavItem.jsList.jsListItem.js12345678910111213141516171819202122import Nav from './Nav.js'
import NavItem from './NavItem.js'
import List from './List.js'
import ListItem from './ListItem.js'
export default function Movies({ movies }) {
return (
<div className="divide-y divide-slate-100">
<Nav>
<NavItem href="/new" isActive>New Releases</NavItem>
<NavItem href="/top">Top Rated</NavItem>
<NavItem href="/picks">Vincent’s Picks</NavItem>
</Nav>
<List>
{movies.map((movie) => (
<ListItem key={movie.id} movie={movie} />
))}
</List>
</div>
不想涉足组件框架的世界？利用 Tailwind 内置的 @apply 指令，可以通过复制、粘贴类名列表的方式 将一系列工具类所对应的 CSS 代码提取到自定义类中。了解更多关于样式重用的信息Weekly one-on-oneDate and timeThu Nov 15, 2020 10:00am - 11:00am ESTLocationKitchener, ONDescriptionNo meeting descriptionAttendeesAndrew McDonaldDeclineAcceptstyles.css123456789101112.btn {
@apply text-base font-medium rounded-lg p-3;
.btn--primary {
@apply bg-sky-500 text-white;
.btn--secondary {
@apply bg-slate-100 text-slate-900;
index.html313233343536373839 </dd> </div> </dl> <footer class="grid grid-cols-2 gap-x-6"> <button class="btn btn--secondary">Decline</button> <button class="btn btn--primary">Accept</button> </footer></article>夜间模式（Dark mode）现在就使用夜间模式吧。你也不希望用户在凌晨两点用手机打开你的网站，被刺眼的白光晃瞎双眼吧？ 在配置文件中开启夜间模式，然后将 dark: 前缀添加到任何代表颜色的工具类名称前面，就能支持夜间模式了。 此功能支持背景色（background colors）、文本颜色（text colors）、边框颜色（border colors）以及渐变色（gradients）。了解更多关于夜间模式的信息Disable dark mode
Ep. 128
Scaling CSS at Heroku with Utility Classes
Full Stack Radio
24:16
75:50
1x
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
<div class="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
<div class="flex items-center space-x-4">
<img src="/full-stack-radio.png" alt="" width="88" height="88" class="flex-none rounded-lg bg-slate-100" loading="lazy" />
<div class="min-w-0 flex-auto space-y-1 font-semibold">
<p class="text-cyan-500 dark:text-cyan-400 text-sm leading-6">
<abbr title="Episode">Ep.</abbr> 128
</p>
<h2 class="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate">
Scaling CSS at Heroku with Utility Classes
</h2>
<p class="text-slate-900 dark:text-slate-50 text-lg">
Full Stack Radio
</p>
</div>
</div>
<div class="space-y-2">
<div class="relative">
<div class="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
<div class="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" aria-label="music progress" aria-valuenow="1456" aria-valuemin="0" aria-valuemax="4550"></div>
</div>
<div class="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow">
<div class="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div>
</div>
</div>
<div class="flex justify-between text-sm leading-6 font-medium tabular-nums">
<div class="text-cyan-500 dark:text-slate-100">24:16</div>
<div class="text-slate-500 dark:text-slate-400">75:50</div>
</div>
</div>
</div>
<div class="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center">
<div class="flex-auto flex items-center justify-evenly">
<button type="button" aria-label="Add to favorites">
<svg width="24" height="24">
<path d="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Previous">
<svg width="24" height="24" fill="none">
<path d="m10 12 8-6v12l-8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" aria-label="Rewind 10 seconds">
<svg width="24" height="24" fill="none">
<path d="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5 5v3.111c0 .491.398.889.889.889H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<button type="button" class="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause">
<svg width="30" height="32" fill="currentColor">
<rect x="6" y="4" width="4" height="24" rx="2" />
<rect x="20" y="4" width="4" height="24" rx="2" />
</svg>
</button>
<div class="flex-auto flex items-center justify-evenly">
<button type="button" aria-label="Skip 10 seconds">
<svg width="24" height="24" fill="none">
<path d="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19 5v3.111c0 .491-.398.889-.889.889H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Next">
<svg width="24" height="24" fill="none">
<path d="M14 12 6 6v12l8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500">
1x
</button>
</div>
</div>
定制你可以对 Tailwind 扩展、调优、修改。Tailwind 包含一组精心设计的、开箱即用的默认设置，但实际上literally 这一切都是可以自定义的，从调色板（color palette）到间距比例（spacing scale）再到 阴影甚至鼠标。通过 tailwind.config.js 文件来打造你自己的设计系统，然后让 Tailwind 将其转化为你自己专属的 CSS 框架。了解更多有关配置的信息SimplePlayfulElegantBrutalistTypographyCSS classfont-displayFont nameInterSampleAaBbCcCSS classfont-bodyFont size14ptSampleLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat.ColorsCSS class prefixbg-primaryRange50-900SampleCSS class prefixbg-secondaryRange50-900Sample1
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',
},
},
},
先进的功能我们习惯站在技术的最前沿。Tailwind 的先进性是无可争议的，它充分利用了所有最新和最棒的 CSS 功能，让开发者尽可能获得最好的使用体验。我们为 grid 布局提供了一流的支持、可组合的 transforms以及基于 CSS 变量实现渐变功能、 支持最新的状态选择器 :focus-visible等等。了解更多关于 grid template columns 的信息CSS GridTransformsFilters123456789101112131415161718<div class="grid grid-flow-col grid-rows-2 grid-cols-3 gap-8">
<div>
<img src="/mountains-1.jpg" alt="" loading="lazy">
</div>
<div class="col-start-3">
<img src="/mountains-2.jpg" alt="" loading="lazy">
</div>
<div>
<img src="/mountains-3.jpg" alt="" loading="lazy">
</div>
<div>
<img src="/mountains-4.jpg" alt="" loading="lazy">
</div>
<div class="row-start-1 col-start-2 col-span-2">
<img src="/mountains-5.jpg" alt="" loading="lazy">
</div>
</div>
编辑器对流行的编辑器进行了集成。还在为记不住所有类名而担心吗？Tailwind CSS IntelliSense 扩展已经支持 VS Code 了，还不快去使用。智能自动补全提示、代码检查（linting）、CSS 类定义等，所有这些 都集成到编辑器中了，并且无需任何配置。了解更多关于编辑器设置的信息123456789101112131415161718192021222324<div class="w-full flex items-center justify-between block p-6 space-x-6">
<div class="flex-1 truncate">
<div class="flex items-center space-x-3">
<h3 class="text-slate-900 text-sm font-medium truncate">Jane Cooper</h3>
<span class="text-teal-600">Admin</span>
</div>
<p class="mt-1 text-slate-500 text-sm truncate">Regional Paradigm Technician</p>
</div>
<img class="w-10 h-10 bg-slate-300 rounded-full shrink-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="" loading="lazy">
</div>
<div class="border-t border-slate-200">
<div class="-mt-px flex">
<div class="w-0 flex-1 flex border-r border-slate-200">
<a href="#" class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-slate-700 font-medium border border-transparent rounded-bl-lg hover:text-slate-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150">
<svg class="w-5 h-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
<span class="ml-3">Email</span>
</a>
</div>
</div>
</div>
Problems'flex' applies the same CSS property as 'block'. cssConflict [1, 20]'block' applies the same CSS property as 'flex'. cssConflict [1, 54]现成的组件Tailwind UI 可以帮你跑得更快。Tailwind UI 是一个美观、完全支持响应式布局的 UI 组件库，是由我们（Tailwind CSS 的创作团队）设计并 开发的。该组件库包含了数百个现成的示例供你选择， 并且保证能让你找到一个完美的模板作为 你千里之行的起点。了解更多入门安装编辑器设置Using with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade Guide核心概念Utility-First FundamentalsHandling Hover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & Directives定制ConfigurationContent ConfigurationTheme ConfigurationCustomizing ScreensCustomizing ColorsCustomizing SpacingPluginsPresets社区GitHubDiscordTwitterYouTube友链BootstrapBootstrap(English)ReactNext.jsDocusaurusnpmYarnpnpmWebpackParcelRollupPostCSSPurgeCSSSasscssnanoSvelteBabelGatsbyVuePressAlpine.jsJestWebAssemblyDenoMarkDownjQueryPreactjsEleventy(11ty)StrapiNunjucksCheerioKoaKuocaiCDNTailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系Tailwind 商标由 Tailwind Labs Inc. 所有京ICP备15031610号-8