Tailwind CSS 中文网

无需离开HTML即可快速构建现代网站。

实用优先的 CSS 框架，包含以下类 flex, pt-4, text-center and rotate-90 可以直接在您的标记中组合以构建任何设计。

快速入门
<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

“最佳实践”实际上不起作用。

我写过 几千字 为什么传统的“语义类名”是 CSS 难以维护的原因，但事实是，除非你真正尝试，否则你永远不会相信我。如果你能抑制呕吐的冲动，给它一个机会，我真的认为你会想知道你以前是如何用其他方式使用 CSS 的。

Adam Wathan
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

Constraint-based

适用于您的设计系统的 API

实用类可帮助您在系统约束下工作，而不是在样式表中随意添加值。它们可让您轻松实现颜色选择、间距、排版、阴影以及构成精心设计系统的其他所有内容的一致性。

进一步了解, 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

认真地构建任何你想要的东西。

由于 Tailwind 非常底层，它绝不会鼓励您设计两次相同的网站。即使使用相同的调色板和尺寸比例，也可以很容易地在下一个项目中构建具有完全不同外观的相同组件。

快速入门, 安装
<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

它很小 — 再也不用发送未使用的 CSS。

Tailwind 在构建生产环境时会自动删除所有未使用的 CSS，这意味着最终的 CSS 包会尽可能小。事实上，大多数 Tailwind 项目向客户端发送的 CSS 都少于 10kB。

进一步了解, 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

一切皆有响应。

在 CSS 中处理大量复杂的媒体查询非常麻烦，因此 Tailwind 可让您直接在 HTML 中构建响应式设计。

将屏幕尺寸放在任何实用程序类前面，然后观察它神奇地应用于特定的断点。

进一步了解, 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: 放在样式类的开头. 适用于 focus, active, disabled, focus-within, focus-visible, 甚至我们自己发明的奇特状态 group-hover.

进一步了解, 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

担心重复？别担心。

如果您一遍又一遍地重复相同的实用程序，那么您所要做的就是将它们提取到组件或模板部分中，然后您就拥有了单一事实来源，因此您可以在一个地方进行更改。

进一步了解, 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>
  )
}

不喜欢组件框架？

使用Tailwind的 @apply 指令只需复制和粘贴类名列表即可将重复的实用程序模式提取到自定义 CSS 类中。

进一步了解, 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

现在有了暗模式。

不想成为那些凌晨 2 点用手机打开时让人眼花缭乱的网站之一？在配置文件中启用暗黑模式，然后在任何颜色实用程序前面添加 dark:，以便在暗黑模式激活时应用它。适用于背景颜色、文本颜色、边框颜色甚至渐变。

进一步了解, 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

扩展它、调整它、改变它。

Tailwind 包含一组精心设计的开箱即用的默认设置，但实际上一切都可以自定义——从调色板到间距比例到框阴影到鼠标光标。

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

进一步了解, 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

前沿是我们的舒适区。

Tailwind 绝对具有现代感，并利用了所有最新和最出色的 CSS 功能，让开发人员的体验尽可能愉快。

我们获得了一流的 CSS 网格支持、由 CSS 变量支持的可组合变换和渐变、对现代状态选择器如 :focus-visible的支持，以及更多。

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

世界一流的 IDE 集成。

担心记住所有这些类名？VS Code 的 Tailwind CSS IntelliSense 扩展可以满足您的需求。

获得智能自动完成建议、linting、类定义等，所有这些都可以在您的编辑器中获得，无需任何配置。

进一步了解, 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

使用 Tailwind UI 可以实现更快的移动。

Tailwind UI 是一系列精美、响应迅速的 UI 组件，由我们（Tailwind CSS 的创建者）设计和开发。它有数百个现成的示例可供选择，保证能帮助您找到构建内容的完美起点。

进一步了解