Tailwind CSS - 在不离开 HTML 的情况下快速构建现代网站。

一个实用的 CSS 框架，包含类似 flex、pt-4、text-center 和 rotate-90 等类，可以组合在一起直接在您的标记中构建任何设计。

<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 是我见过唯一能在大型团队中扩展的框架。易于定制，适应任何设计，构建大小微小。” </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 是我见过唯一能在大型团队中扩展的框架。它易于定制，适应任何设计，构建大小非常小。”

Sarah Dayan

Staff Engineer, Algolia

“最佳实践”实际上并不奏效。

我已经写了几千字，解释了为什么传统的“语义化类名”是导致 CSS 难以维护的原因，但事实是，除非你亲自尝试，否则你永远不会相信我。如果你能抑制住反感的冲动，给它一个机会，我真的认为你会惊讶于你以前是如何用其他方式处理 CSS 的。

Adam Wathan

Tailwind CSS 的创始人

证言

I feel like an idiot for not using Tailwind CSS until now.

Remix & React Training
If I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS.

Vercel
I 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 Vieira
CodeSandbox
Tailwind CSS is the greatest CSS framework on the planet.

Former WWE Champion
I started using @tailwindcss. I instantly fell in love with their responsive modifiers, thorough documentation, and how easy it was customizing color palettes.

Software Engineer
Loved it the very moment I used it.

Web Developer
There’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.

JavaScript Developer
Okay, I’m officially *all* in on the @tailwindcss hype train. Never thought building websites could be so ridiculously fast and flexible.

Programmer @ TrendyMinds
Okay, @tailwindcss just clicked for me and now I feel like a #!@%&$% idiot.

React Engineer
I'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.

Designer
After 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.

Ruby & iOS Developer
I 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 rebuild

Front-End Developer
@tailwindcss looked unpleasant at first, but now I’m hooked on it.

Front-End Developer
Once you start using tailwind, there is no going back.
I use @tailwindcss for every single project because it removes most of the annoyances of css and is multiple times quicker
It'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.
My 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.
Tailwind looked like pure spaghetti until I used it in a real project. Now it's the only way I make websites. Simple, fast, scalable.
Tailwind 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!
Tailwind 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.
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.
I 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.
@tailwindcss makes you better at CSS. Change my mind.
Awesome 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.
I 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.
I'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.

Co-Founder/CTO @LaunchPathInc
With 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.
Tailwind 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.

UI Designer/Developer
Tailwind 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.

Full-Stack Developer
Have 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.

Senior Program Manager at Microsoft
I’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.

Developer
Tailwind makes writing code feel like I’m using a design tool.

Co-Founder @StyptApp
Tailwind CSS is bridging the gap between design systems and products. It’s becoming the defacto API for styling.

Staff Software Engineer @Algolia
I never want to write regular CSS again. Only @tailwindcss.

Web Developer
I 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.

Full-Stack Developer
Tailwind made me enjoy frontend development again and gave me the confidence that I can realize any design - no matter how complex it may be.

CTO at @beyondcode
Tailwind turned me into a complete stack developer.

Full-Stack Developer
Tailwind is the easiest and simplest part of any project I work on. I can't imagine I'll build anything big without it.

Developer
Tailwind 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.

Developer
Having 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.

Software Engineer
I’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!

Developer
Tailwind 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.

JavaScript Developer
It’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!

Full-Stack Developer
I wasn’t comfortable using CSS until I met Tailwind. Its easy to use abstraction combined with excellent documentation are a game changer!

Head of Unplatform @avivasolutions
Tailwind turns implementing designs from a chore to a joy. You'll fall in love with building for the web all over again.

Developer
Tailwind 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.

Front-End Developer
If 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.

Developer
Being 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.

Programmer
Getting 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.

CTO Primitive
Tailwind 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.

Full Stack Developer & Designer
Using 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.

Developer
Tailwind has completely revolutionized our devops pipeline. The CLI works consistently no matter what framework is in place.

President & CTO @agilitycms
Tailwind 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”.

Software Engineer
Tailwind 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.

Developer
Tailwind is the only way to work with CSS at scale.

Developer
Tailwind 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.

Front-End Developer
Tailwind 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.

Developer
Skip to the end. Use @tailwindcss.

Developer and Educator
I 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.

Full Stack Web Developer & Tech Educator
I don't use it but if I would use something I'd use Tailwind!

Maker
With Tailwind I can offer my clients faster turnaround times on custom WordPress themes, both for initial builds and for future revisions.

WordPress Developer
Thanks to @tailwindcss, CSS started to make sense to me.

Core Team Member @laravelphp
Tailwind 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.

Developer
CSS 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.

Founder of @mawla_io
I 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.

DevOps Engineer & Network Administrator
The Tailwind docs are its real magic. It is actually better documented than CSS itself. It’s such a pleasure to use.

Developer
I've never felt more confident designing and styling websites and web apps than when I've used Tailwind CSS.

Developer
Tried it once, never looked back. Tailwindcss convert since 0.7 and it just keeps getting better and better.

Front-End Developer
If 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!
Before 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!
I 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.

Digital Designer & Developer
After 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.

Developer
Tailwind 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.

Developer
Using Tailwind is an accelerant for rapid prototyping design systems. Strong documentation, helpful community, and instant results.

Design Operations Lead at BetterCloud
I instinctively hated utility CSS, but Tailwind completely converted me. It reignited my excitement for front-end development and implementing custom designs!

Full-Stack Developer
Tailwind 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.

Co-Founder of FeatureBoard
When 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.
Going 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.

Senior Front-End Developer @CrateandBarrel
I 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.

Head Engineer @SubscriptionBox
I 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.
Tailwind 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.

Full-Stack Developer
Tailwind 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.

Australian
Tailwind completely changed my freelance career by allowing me to build out completely custom designs really fast without writing any CSS.

Front-End Developer
Using Tailwind CSS will make you feel like you just unlocked a cheat code.

CTO @Quartix
Every developer I’ve convinced to give Tailwind a try has come back and said they are never going back. Every. Single. One.

Web Developer