tailwindcss

tailwindcss

快速、高效地构建网页样式

版本：v4.1

官网：https://tailwindcss.com/

中文：https://tailwind.nodejs.cn/

安装

在Vite中安装

  1. 安装TailwindCSS

    1
    npm install tailwindcss @tailwindcss/vite

  2. 修改配置

    在vite.config.ts文件中

    1
    2
    3
    4
    5
    6
    7
    import tailwindcss from "@tailwindcss/vite";

    export default defineConfig({
      plugins: [
          tailwindcss()
      ],
    });

  3. 在css文件中导入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    @import "tailwindcss";

    @theme {
      --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

    html,
    body {
      @apply bg-white dark:bg-gray-950;

      @media (prefers-color-scheme: dark) {
        color-scheme: dark;
      }
    }

  4. 测试，root.tsx文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import "./app.css";

    export default function App() {
      return (
          <h1 className="text-3xl font-bold underline">
            Hello world!
          </h1>
      );
    }

    执行npm run dev

基本使用

设置元素不同状态下的样式

伪类 作用 示例
:hover 鼠标光标悬停在元素上时 class=”bg-black hover:bg-white …”
:focus 元素获得聚焦时 class=”border-gray-300 focus:border-blue-400 …”
:focus-within 元素或其后代之一获得聚焦时 class=”focus-within:shadow-lg …”
:focus-visible 通过键盘Tab键获得聚焦时 class=”focus-visible:outline-2 …”
:active 元素被按下时 class=”bg-blue-500 active:bg-blue-600 …”
:visited url链接被访问过后 class=”text-blue-600 visited:text-purple-600 …”
:target url后的#…和元素id匹配时 class=”target:shadow-lg …”
:first-child 如果元素是其类型的第一个子元素 className=”py-4 first:pt-0 …”
:last-child 如果元素是其类型的最后一个子元素
:only-child 如果是唯一子元素 class=”py-4 only:py-0 …”
:nth-child(odd) 奇数编号子元素 class=”bg-white odd:bg-gray-100 …”
:nth-child(even) 偶数编号子元素
:first-of-type 是其类型的第一个子元素
:disabled 当输入被禁用时 class=”disabled:opacity-75 …”
:enabled 当输入被启用时 class=”enabled:hover:border-gray-400

更多伪类和伪元素参考：https://tailwind.nodejs.cn/docs/hover-focus-and-other-states#pseudo-class-reference

响应式界面

首先需要在head标签中添加

1
2
3
4
5
<head>
    {/*设置视口的宽度等于设备的宽度*/}
    {/*设置初始缩放比例为100%*/}
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

然后使用

1
2
{/*w-16为默认尺寸, md为中等大小屏幕时, lg为大屏时*/}
<img class="w-16 md:w-32 lg:w-48" src="..." />

尺寸参考

Breakpoint prefix Minimum width
sm 40rem (640px)
md 48rem (768px)
lg 64rem (1024px)
xl 80rem (1280px)
2xl 96rem (1536px)
Variant Media query
max-sm @media (width < 40rem) { ... }
max-md @media (width < 48rem) { ... }
max-lg @media (width < 64rem) { ... }
max-xl @media (width < 80rem) { ... }
max-2xl @media (width < 96rem) { ... }
学习笔记 > 前端 > CSS库
#前端
tailwindcss
http://xwww12.github.io/2025/10/10/前端/CSS库/tailwindcss/
作者
xw
发布于
2025年10月10日
许可协议