•  


Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

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 started 
<
figure
 class
=
"
bg-slate-100 rounded-xl
 dark:bg-slate-800
"
>

  <
img
 class
=
"
w-24 h-24
"
 src
=
"
/sarah-dayan.jpg
"
 alt
=
"
"
 width
=
"
384
"
 height
=
"
512
"
>

  <
div
 class
=
"
pt-6
 space-y-4
"
>

    <
blockquote
>

      <
p
 class
=
"
text-lg
"
>

        “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
>

      <
div
>

        Sarah Dayan
      
</
div
>

      <
div
>

        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 Carre

  • 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

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
  • w- 64
  • w- 60
  • w- 56
  • w- 52
  • w- 48
  • w- 44
  • w- 40
  • w- 36 
<
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 
<
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 
<!
DOCTYPE
 html
>

<
html
 lang
=
"
en
"
>

  <
head
>

    <
meta
 charset
=
"
UTF-8
"
>

    <
meta
 name
=
"
viewport
"
 content
=
"
width=device-width, initial-scale=1.0
"
>

    <
title
>
Document
</
title
>

    <
link
 rel
=
"
stylesheet
"
 href
=
"
/build.css
"
>

  </
head
>

  <
body
>

    <
button
 class
=
"
"
>
</
button
>

  </
body
>

</
html
>
build.css
Terminal 
npx tailwindcss 
-o
 build.css --content index.html
 -w

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
workcation.com
Tailwind UI - Official Tailwind CSS Components
Workcation - Find a trip that suits you
Headless UI ? Unstyled, fully accessible UI components 
<
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
  • Title
    API Integration
    Category
    Engineering
    Users
  • Title
    New Benefits Plan
    Category
    Human Resources
    Users
  • New project 
<
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

Prognosis Negative

Rating
PG-13
Year
2021
Genre
Comedy
Runtime
1h 46m
Cast
Simon Pegg, Zach Galifianakis

Rochelle, Rochelle

Rating
R
Year
2020
Genre
Romance
Runtime
1h 56m
Cast
Emilia Clarke 
import
 Nav
 from
 '
'

import
 NavItem
 from
 '
'

import
 List
 from
 '
'

import
 ListItem
 from
 '
'


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 time
-
Location
Kitchener, ON
Description
No meeting description
Attendees
Andrew McDonald
Decline
Accept

styles.css 

.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 

      </
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

Ep. 128

Scaling CSS at Heroku with Utility Classes

Full Stack Radio

24:16
75:50 
<
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

Typography

  • CSS class
    font-display
    Font name
    Inter
    Sample
    AaBbCc
  • CSS class
    font-body
    Font size
    14pt
    Sample
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.

Colors

  • CSS class prefix
    bg- primary
    Range
    50-900
    Sample 
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 
<
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 
<
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
=
"
"
>
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
&amp;
ixid=eyJhcHBfaWQiOjEyMDd9
&amp;
auto=format
&amp;
fit=facearea
&amp;
facepad=4
&amp;
w=256
&amp;
h=256
&amp;
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'.

  • 'block' applies the same CSS property as 'flex'.

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
- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회가 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본 

Close