tailwindcss - 响应式tailwindcss 系列是一个专门的教程，依据官方文档整理经常用到的写法和注意事项

响应式

前缀	最小宽度	CSS
`sm`	640px	`@media (min-width: 640px) { ... }`
`md`	768px	`@media (min-width: 768px) { ... }`
`lg`	1024px	`@media (min-width: 1024px) { ... }`
`xl`	1280px	`@media (min-width: 1280px) { ... }`
`2xl`	1536px	`@media (min-width: 1536px) { ... }`

断点范围

// 单个断点
<div class="md:max-xl:flex">
  <!-- ... -->
</div>

修饰符	Media query
`max-sm`	`@media not all and (min-width: 640px) { ... }`
`max-md`	`@media not all and (min-width: 768px) { ... }`
`max-lg`	`@media not all and (min-width: 1024px) { ... }`
`max-xl`	`@media not all and (min-width: 1280px) { ... }`
`max-2xl`	`@media not all and (min-width: 1536px) { ... }`

自定义断点

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      tablet: "640px",
      // => @media (min-width: 640px) { ... }

      laptop: "1024px",
      // => @media (min-width: 1024px) { ... }

      desktop: "1280px",
      // => @media (min-width: 1280px) { ... }
    },
  },
};

暗黑模式

手动切换

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "selector",
  // ...
};

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

如果你在Tailwind配置中设置了前缀，一定要把它添加到 dark 类中。例如，如果你有一个前缀 tw- ，你需要使用 tw-dark 类来启用黑暗模式。

自定义选择器

您可以自定义暗模式选择器，方法是将 darkMode 设置为一个数组，并将自定义选择器作为第二项：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['selector', '[data-mode="dark"]'],
  // ...
}

同时支持手动选择和系统偏好

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
  localStorage.theme === "dark" ||
  (!("theme" in localStorage) &&
    window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
  document.documentElement.classList.add("dark");
} else {
  document.documentElement.classList.remove("dark");
}

// Whenever the user explicitly chooses light mode
localStorage.theme = "light";

// Whenever the user explicitly chooses dark mode
localStorage.theme = "dark";

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem("theme");

覆盖暗黑模式变量

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: [
    "variant",
    [
      "@media (prefers-color-scheme: dark) { &:not(.light *) }",
      "&:is(.dark *)",
    ],
  ],
  // ...
};

重用样式

使用语言特性循环

如果你需要在多个文件中重用某些样式，最好的策略是创建一个组件

@apply

<!-- Before extracting a custom class -->
<button class="py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}