tailwindcss.com
Open in
urlscan Pro
2606:4700:10::ac43:2910
Public Scan
URL:
https://tailwindcss.com/
Submission: On August 31 via api from US — Scanned from DE
Submission: On August 31 via api from US — Scanned from DE
Form analysis 0 forms found in the DOM
Text Content
Search
Navigation
* Docs
* Components
* Blog
* Showcase
ThemeTailwind CSS on GitHub
RAPIDLY BUILD MODERN WEBSITES WITHOUT EVER LEAVING YOUR HTML.
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.
Get startedQuick search...Ctrl K
1
2
3
4
5
6
7
8
9
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 Dayan
Staff Engineer, Algolia
“BEST PRACTICES” DON’T ACTUALLY WORK.
> I’ve written a few thousand words on why traditional “semantic class names”
> are the reason CSS is hard to maintain, but the truth is you’re never going to
> believe me until you actually try it. If you can suppress the urge to retch
> long enough to give it a chance, I really think you’ll wonder how you ever
> worked with CSS any other way.
Adam Wathan
Creator of Tailwind CSS
TESTIMONIALS
* > I feel like an idiot for not using Tailwind CSS until now.
Ryan Florence
Remix & React Training
* > If I had to recommend a way of getting into programming today, it would be
> HTML + CSS with Tailwind CSS.
Guillermo Rauch
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.
Bret "The Hitman" Hart
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.
Dacey Nolan
Software Engineer
* > Loved it the very moment I used it.
Gilbert Rabut Tsurwa
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.
Graeme Houston
JavaScript Developer
* > Okay, I’m officially *all* in on the @tailwindcss hype train. Never thought
> building websites could be so ridiculously fast and flexible.
Aaron Bushnell
Programmer @ TrendyMinds
* > Okay, @tailwindcss just clicked for me and now I feel like a #!@%&$% idiot.
Ken Wheeler
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.
Jad Limcaco
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.
Luke Redpath
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
Jon Bloomer
Front-End Developer
* > @tailwindcss looked unpleasant at first, but now I’m hooked on it.
Andrew Gilliland
Front-End Developer
* > Once you start using tailwind, there is no going back.
Praveen Kumar
* > I use @tailwindcss for every single project because it removes most of the
> annoyances of css and is multiple times quicker
Vasu Bansal
* > 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.
Dennis Walsh
* > 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.
Eric L. Barnes
* > 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.
Nick Saraev
* > 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!
Luke Bennett
* > 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.
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 Payne
* > 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.
Rotimi Best
* > @tailwindcss makes you better at CSS. Change my mind.
Kelvin Omereshone
* > 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.
John W Clarke
* > 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.
Sumit Kumar
* > 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.
Mannie Schumpert
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.
Christian Holman
* > 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.
Jilson Thomas
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.
Jake Ryan Smith
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.
Debbie O'Brien
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.
Ben Furfie
Developer
* > Tailwind makes writing code feel like I’m using a design tool.
Didier Catz
Co-Founder @StyptApp
* > Tailwind CSS is bridging the gap between design systems and products. It’s
> becoming the defacto API for styling.
Sarah Dayan
Staff Software Engineer @Algolia
* > I never want to write regular CSS again. Only @tailwindcss.
Trey Piepmeier
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.
Madeline Campbell
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.
Marcel Pociot
CTO at @beyondcode
* > Tailwind turned me into a complete stack developer.
Boris Lepikhin
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.
Christopher Pitt
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.
Chase Giunta
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.
Ivan Guzman
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!
Charlie Joseph
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.
Kahlil Lechelt
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!
Marco Singhof
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!
Joost Meijles
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.
Matt Swanson
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.
Matija Marohnić
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.
Hugh Durkin
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.
Matthias Schmidt
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.
Jerred Hurst
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.
Braunson Yager
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.
Zac Jordan Zajdel
Developer
* > Tailwind has completely revolutionized our devops pipeline. The CLI works
> consistently no matter what framework is in place.
Joel Varty
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”.
Neil Docherty
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.
Søren Kottal
Developer
* > Tailwind is the only way to work with CSS at scale.
Aaron Francis
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.
Sanjay Soundarajan
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.
Brent Garner
Developer
* > Skip to the end. Use @tailwindcss.
Kent C. Dodds
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.
Shruti Balasa
Full Stack Web Developer & Tech Educator
* > I don't use it but if I would use something I'd use Tailwind!
Pieter Levels
Maker
* > With Tailwind I can offer my clients faster turnaround times on custom
> WordPress themes, both for initial builds and for future revisions.
Greg Sullivan
WordPress Developer
* > Thanks to @tailwindcss, CSS started to make sense to me.
Nuno Maduro
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.
Igor Randjelovic
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.
Dan Malone
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.
Sergio Peris
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.
Zach Knickerbocker
Developer
* > I've never felt more confident designing and styling websites and web apps
> than when I've used Tailwind CSS.
Glenn Meyer
Developer
* > Tried it once, never looked back. Tailwindcss convert since 0.7 and it just
> keeps getting better and better.
Jan D'Hollander
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!
Andrew Brown
* > 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!
Marc Köhlbrugge
* > 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.
David Hellmann
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.
Joshua Lowe
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.
Josh Manders
Developer
* > Using Tailwind is an accelerant for rapid prototyping design systems.
> Strong documentation, helpful community, and instant results.
Ian Gaenssley
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!
Jess Archer
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.
Corey Ginnivan
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.
Ryan Chenkie
* > 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.
Dan Gayle
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.
Dan Brooking
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.
Trevor Campbell
* > 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.
Jeff Sagal
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.
Michael Dyrynda
Australian
* > Tailwind completely changed my freelance career by allowing me to build out
> completely custom designs really fast without writing any CSS.
Jason Beggs
Front-End Developer
* > Using Tailwind CSS will make you feel like you just unlocked a cheat code.
David Paluy
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.
Jacob Graf
Web Developer
Show more...
CONSTRAINT-BASED
An API for your design system.
Utility classes help you work within the constraints of a system instead of
littering your stylesheets with arbitrary values. They make it easy to be
consistent with color choices, spacing, typography, shadows, and everything else
that makes up a well-engineered design system.
Learn more, utility-first fundamentals
* Sizing
* Colors
* Typography
* Shadows
*
w-96
*
w-80
*
w-72
*
w-64
*
w-60
*
w-56
*
w-52
*
w-48
*
w-64
*
w-60
*
w-56
*
w-52
*
w-48
*
w-44
*
w-40
*
w-36
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
<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>
BUILD ANYTHING
Build whatever you want, seriously.
Because Tailwind is so low-level, it never encourages you to design the same
site twice. Even with the same color palette and sizing scale, it's easy to
build the same component with a completely different look in the next project.
Get started, installation
* Simple
* Playful
* Elegant
* Brutalist
CLASSIC UTILITY JACKET
KIDS JUMPSUIT
DOGTOOTH STYLE JACKET
RETRO SHOE
$110.00
$39.00
$350.00
$89.00
In stock
In stock
In stock
In stock
*
XSXSXSXS
*
SSSS
*
MMMM
*
LLLL
*
XLXLXLXL
Buy nowBuy nowBuy nowBuy now
Add to bagAdd to bagAdd to bagAdd to bag
Free shipping on all continental US orders.
Free shipping on all continental US orders.
Free shipping on all continental US orders.
Free shipping on all continental US orders.
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<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">
S
</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">
M
</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">
L
</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
It’s tiny — never ship unused CSS again.
Tailwind automatically removes all unused CSS when building for production,
which means your final CSS bundle is the smallest it could possibly be. In fact,
most Tailwind projects ship less than 10kB of CSS to the client.
Learn more, optimizing for production
index.html
tailwind.config.js
package.json
1
<!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>
13
build.css
1
Terminal
npx tailwindcss -o--output build.css --content index.html -w --watch
MOBILE-FIRST
Responsive everything.
Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind
lets you build responsive designs right in your HTML instead.
Throw a screen size in front of literally any utility class and watch it
magically apply at a specific breakpoint.
Learn more, responsive design
sm
md
lg
xl
2xl
workcation.com
Tailwind UI - Official Tailwind CSS Components
Workcation - Find a trip that suits you
Headless UI – Unstyled, fully accessible UI components
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
<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>
STATE VARIANTS
Hover and focus states? We got ’em.
Want to style something on hover? Stick hover: at the beginning of the class you
want to add. Works for focus, active, disabled, focus-within, focus-visible, and
even fancy states we invented ourselves like group-hover.
Learn more, handling hover, focus, and other states
PROJECTS
New
* TitleAPI Integration
CategoryEngineering
Users
* TitleNew Benefits Plan
CategoryHuman Resources
Users
* TitleOnboarding Emails
CategoryCustomer Success
Users
* New project
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
<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>
COMPONENT-DRIVEN
Worried about duplication? Don’t be.
If you're repeating the same utilities over and over and over again, all you
have to do is extract them into a component or template partial and boom —
you've got a single source of truth so you can make changes in one place.
Learn more, reusing styles
* React
* Vue
* Angular
* Blade
* New Releases
* Top Rated
* Vincent’s Picks
PROGNOSIS NEGATIVE
Star rating2.66
RatingPG-13
Year2021
GenreComedy
Runtime1h 46m
CastSimon Pegg, Zach Galifianakis
ROCHELLE, ROCHELLE
Star rating3.25
RatingR
Year2020
GenreRomance
Runtime1h 56m
CastEmilia Clarke
DEATH BLOW
Star rating4.95
Rating18A
Year2020
GenreAction
Runtime2h 5m
CastIdris Elba, John Cena, Thandiwe Newton
* Movies.js
* Nav.js
* NavItem.js
* List.js
* ListItem.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22import 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>
)
}
NOT INTO COMPONENT FRAMEWORKS?
Use Tailwind's @apply directive to extract repeated utility patterns into custom
CSS classes just by copying and pasting the list of class names.
Learn more, reusing styles
WEEKLY ONE-ON-ONE
Date and timeThu Nov 15, 2020 10:00am - 11:00am EST
LocationKitchener, ON
DescriptionNo meeting description
AttendeesAndrew McDonald
Decline
Accept
STYLES.CSS
1
2
3
4
5
6
7
8
9
10
11
12.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.HTML
31
32
33
34
35
36
37
38
39
</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
Now with Dark Mode.
Don’t want to be one of those websites that blinds people when they open it on
their phone at 2am? Enable dark mode in your configuration file then throw dark:
in front of any color utility to apply it when dark mode is active. Works for
background colors, text colors, border colors, and even gradients.
Learn more, dark mode
Disable dark mode
Ep. 128
SCALING CSS AT HEROKU WITH UTILITY CLASSES
Full Stack Radio
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
<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>
CUSTOMIZATION
Extend it, tweak it, change it.
Tailwind includes an expertly crafted set of defaults out-of-the-box, but
literally everything can be customized — from the color palette to the spacing
scale to the box shadows to the mouse cursor.
Use the tailwind.config.js file to craft your own design system, then let
Tailwind transform it into your own custom CSS framework.
Learn more, configuration
* Simple
* Playful
* Elegant
* Brutalist
TYPOGRAPHY
* CSS classfont-display
Font nameInter
SampleAaBbCc
* CSS classfont-body
Font size14pt
SampleLorem 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.
COLORS
* CSS class prefixbg-primary
Range50-900
Sample
*
*
*
*
*
*
*
*
*
*
* CSS class prefixbg-secondary
Range50-900
Sample
*
*
*
*
*
*
*
*
*
*
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: '#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',
},
},
},
}
MODERN FEATURES
Cutting-edge is our comfort zone.
Tailwind is unapologetically modern, and takes advantage of all the latest and
greatest CSS features to make the developer experience as enjoyable as possible.
We've got first-class CSS grid support, composable transforms and gradients
powered by CSS variables, support for modern state selectors like
:focus-visible, and tons more.
Learn more, grid template columns
* CSS Grid
* Transforms
* Filters
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<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>
EDITOR TOOLS
World-class IDE integration.
Worried about remembering all of these class names? The Tailwind CSS
IntelliSense extension for VS Code has you covered.
Get intelligent autocomplete suggestions, linting, class definitions and more,
all within your editor and with no configuration required.
Learn more, editor setup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<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]
READY-MADE COMPONENTS
Move even faster with Tailwind UI.
Tailwind UI is a collection of beautiful, fully responsive UI components,
designed and developed by us, the creators of Tailwind CSS. It's got hundreds of
ready-to-use examples to choose from, and is guaranteed to help you find the
perfect starting point for what you want to build.
Learn more
GETTING STARTED
* Installation
* Editor Setup
* Using with Preprocessors
* Optimizing for Production
* Browser Support
* Upgrade Guide
CORE CONCEPTS
* Utility-First Fundamentals
* Handling Hover, Focus, and Other States
* Responsive Design
* Dark Mode
* Reusing Styles
* Adding Custom Styles
* Functions & Directives
CUSTOMIZATION
* Configuration
* Content Configuration
* Theme Configuration
* Customizing Screens
* Customizing Colors
* Customizing Spacing
* Plugins
* Presets
COMMUNITY
* GitHub
* Discord
* Twitter
* YouTube