内容配置

tailwind.config.js 文件的 content 部分是你配置所有 HTML 模板、JavaScript 组件和任何其他包含 Tailwind 类名称的源文件的路径的地方。

¥The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}

本指南涵盖了确保 Tailwind 生成项目所需的所有 CSS 所需了解的一切。

¥This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.

​配置源路径

¥Configuring source paths

Tailwind CSS 的工作原理是扫描所有 HTML、JavaScript 组件和任何其他模板文件中的类名，然后为这些样式生成所有相应的 CSS。

¥Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles.

为了让 Tailwind 生成你需要的所有 CSS，它需要了解项目中包含任何 Tailwind 类名称的每个文件。

¥In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names.

在配置文件的 content 部分配置所有内容文件的路径：

¥Configure the paths to all of your content files in the content section of your configuration file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}'
  ],
  // ...
}

路径配置为 通配符模式，可以轻松匹配项目中的所有内容文件，而无需进行大量配置：

¥Paths are configured as glob patterns, making it easy to match all of the content files in your project without a ton of configuration:

• 使用 * 匹配除斜杠和隐藏文件以外的任何内容

  ¥Use * to match anything except slashes and hidden files

• 使用 ** 匹配零个或多个目录

  ¥Use ** to match zero or more directories

• 在 {} 之间使用逗号分隔值来匹配选项列表

  ¥Use comma separate values between {} to match against a list of options

Tailwind 在底层使用 fast-glob 库 — 查看他们的文档以了解其他支持的模式功能。

¥Tailwind uses the fast-glob library under-the-hood — check out their documentation for other supported pattern features.

路径是相对于你的项目根目录，而不是你的 tailwind.config.js 文件，因此如果你的 tailwind.config.js 文件位于自定义位置，你仍然应该编写相对于项目根目录的路径。

¥Paths are relative to your project root, not your tailwind.config.js file, so if your tailwind.config.js file is in a custom location, you should still write your paths relative to the root of your project.

​模式建议

¥Pattern recommendations

为了获得最佳性能并避免误报，请尽可能具体地配置你的内容。

¥For the best performance and to avoid false positives, be as specific as possible with your content configuration.

如果你使用像这样的非常广泛的模式，Tailwind 甚至会扫描 node_modules 以查找可能不是你想要的内容：

¥If you use a really broad pattern like this one, Tailwind will even scan node_modules for content which is probably not what you want:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.{html,js}',
  ],
  // ...
}

如果你有任何需要扫描的文件位于项目的根目录（通常是 index.html 文件），请单独列出该文件，以便你的其他模式可以更具体：

¥If you have any files you need to scan that are at the root of your project (often an index.html file), list that file independently so your other patterns can be more specific:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './index.html',
  ],
  // ...
}

一些框架将它们的主要 HTML 入口点隐藏在与其余模板不同的位置（通常是 public/index.html），因此如果你要向该文件添加 Tailwind 类，请确保它也包含在你的配置中：

¥Some frameworks hide their main HTML entry point in a different place than the rest of your templates (often public/index.html), so if you are adding Tailwind classes to that file make sure it’s included in your configuration as well:

module.exports = {
  content: [
    './public/index.html',
    './src/**/*.{html,js}',
  ],
  // ...
}

如果你有任何 JavaScript 文件可以操纵你的 HTML 来添加类，请确保你也包含这些文件：

¥If you have any JavaScript files that manipulate your HTML to add classes, make sure you include those as well:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    './src/**/*.js',
  ],
  // ...
}

// ...
menuButton.addEventListener('click', function () {
  let classList = document.getElementById('nav').classList
  classList.toggle('hidden')
  classList.toggle('block')
})
// ...

同样重要的是，不要扫描任何 CSS 文件 - 将 Tailwind 配置为扫描使用类名的模板，而不是 Tailwind 生成的 CSS 文件。

¥It’s also important that you don’t scan any CSS files — configure Tailwind to scan your templates where your class names are being used, never the CSS file that Tailwind is generating.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.css',
  ],
  // ...
}

​类检测深入

¥Class detection in-depth

Tailwind 扫描源代码中类的方式故意非常简单 - 我们实际上并不用编写的语言解析或执行任何代码，我们只是使用正则表达式来提取可能是类名的每个字符串。

¥The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name.

例如，下面是一些 HTML，其中每个潜在的类名字符串都单独高亮：

¥For example, here’s some HTML with every potential class name string individually highlighted:

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="/img/shopping.jpg" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
      Marketing
    </div>
    <a href="/get-started" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">
      Finding customers for your new business
    </a>
    <p class="mt-2 text-gray-600">
      Getting a new business off the ground is a lot of hard work.
      Here are five ideas you can use to find your first customers.
    </p>
  </div>
</div>

我们不仅仅将搜索限制为 class="..." 属性，因为你可以在任何地方使用类，例如在某些用于切换菜单的 JavaScript 中：

¥We don’t just limit our search to class="..." attributes because you could be using classes anywhere, like in some JavaScript for toggling a menu:

<script>
  menuButton.addEventListener('click', function () {
    let classList = document.getElementById('nav').classList
    classList.toggle('hidden')
    classList.toggle('block')
  })
</script>

通过使用这种非常简单的方法，Tailwind 可以非常可靠地与任何编程语言一起工作，例如 JSX：

¥By using this very simple approach, Tailwind works extremely reliably with any programming language, like JSX for example:

const sizes = {
  md: 'px-4 py-2 rounded-md text-base',
  lg: 'px-5 py-3 rounded-lg text-lg',
}

const colors = {
  indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
  cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}

export default function Button({ color, size, children }) {
  let colorClasses = colors[color]
  let sizeClasses = sizes[size]

  return (
    <button type="button" className={`font-bold ${sizeClasses} ${colorClasses}`}>
      {children}
    </button>
  )
}

​动态类名

¥Dynamic class names

Tailwind 如何提取类名的最重要的含义是它只会找到在源文件中作为完整的不间断字符串存在的类。

¥The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

如果你使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

¥If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串 text-red-600 和 text-green-600 不存在，因此 Tailwind 不会生成这些类。

¥In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

相反，请确保你使用的所有类名都完整存在：

¥Instead, make sure any class names you’re using exist in full:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

如果你正在使用像 React 或 Vue 这样的组件库，这意味着你不应该使用 props 来动态构造类：

¥If you’re using a component library like React or Vue, this means you shouldn’t use props to dynamically construct classes:

function Button({ color, children }) {
  return (
    <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>
      {children}
    </button>
  )
}

相反，将 props 映射到在构建时可静态检测的完整类名：

¥Instead, map props to complete class names that are statically detectable at build-time:

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

这有一个额外的好处，可以让你将不同的属性值映射到不同的颜色阴影，例如：

¥This has the added benefit of letting you map different prop values to different color shades for example:

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500 text-white',
    red: 'bg-red-500 hover:bg-red-400 text-white',
    yellow: 'bg-yellow-300 hover:bg-yellow-400 text-black',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

只要你始终在代码中使用完整的类名，Tailwind 每次都会完美地生成所有 CSS。

¥As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.

​使用第三方库

¥Working with third-party libraries

如果你正在使用任何第三方库（例如 Select2）并使用你自己的自定义 CSS 为该库设置样式，我们建议你在编写这些样式时不要使用 Tailwind 的 @layer 功能：

¥If you’re working with any third-party libraries (for example Select2) and styling that library with your own custom CSS, we recommend writing those styles without using Tailwind’s @layer feature:

@tailwind base;
@tailwind components;

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply border border-gray-300 rounded;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}
/* ... */

@tailwind utilities;

这将确保 Tailwind 始终在你的 CSS 中包含这些样式，这比配置 Tailwind 扫描第三方库的源代码要容易得多。

¥This will ensure that Tailwind always includes those styles in your CSS, which is a lot easier than configuring Tailwind to scan the source code of a third-party library.

如果你已经创建了自己的使用 Tailwind 设置样式的可重用组件集，并将它们导入多个项目，请确保配置 Tailwind 以扫描这些组件的类名：

¥If you’ve created your own reusable set of components that are styled with Tailwind and are importing them in multiple projects, make sure to configure Tailwind to scan those components for class names:

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './node_modules/@my-company/tailwind-components/**/*.js',
  ],
  // ...
}

这将确保 Tailwind 也生成这些组件所需的所有 CSS。

¥This will make sure Tailwind generates all of the CSS needed for those components as well.

如果你在带有工作区的单一仓库中工作，你可能需要使用 require.resolve 来确保 Tailwind 可以看到你的内容文件：

¥If you’re working in a monorepo with workspaces, you may need to use require.resolve to make sure Tailwind can see your content files:

const path = require('path');

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    path.join(path.dirname(require.resolve('@my-company/tailwind-components')), '**/*.js'),
  ],
  // ...
}

​使用相对路径

¥Using relative paths

默认情况下，Tailwind 解析相对于当前工作目录的非绝对内容路径，而不是 tailwind.config.js 文件。如果你从其他目录运行 Tailwind，这可能会导致意外结果。

¥By default Tailwind resolves non-absolute content paths relative to the current working directory, not the tailwind.config.js file. This can lead to unexpected results if you run Tailwind from a different directory.

要始终解析相对于 tailwind.config.js 文件的路径，请使用 content 配置的对象表示法并将 relative 属性设置为 true：

¥To always resolve paths relative to the tailwind.config.js file, use the object notation for your content configuration and set the relative property to true:

module.exports = {
  content: {
    relative: true,
    files: [
      './pages/**/*.{html,js}',
      './components/**/*.{html,js}',
    ],
  },
  // ...
}

这可能会成为框架下一个主要版本的默认行为。

¥This will likely become the default behavior in the next major version of the framework.

​配置原始内容

¥Configuring raw content

如果出于某种原因你需要配置 Tailwind 以扫描一些原始内容而不是文件内容，请使用带有 raw 键的对象而不是路径：

¥If for whatever reason you need to configure Tailwind to scan some raw content rather than the contents of a file, use an object with a raw key instead of a path:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    { raw: '<div class="font-bold">', extension: 'html' },
  ],
  // ...
}

对此没有太多有效的用例 - safelisting 通常才是你真正想要的。

¥There aren’t many valid use-cases for this — safelisting is usually what you really want instead.

​安全列表类

¥Safelisting classes

为了最小的文件大小和最佳的开发体验，我们强烈建议依靠你的 content 配置来告诉 Tailwind 尽可能多地生成哪些类。

¥For the smallest file size and best development experience, we highly recommend relying on your content configuration to tell Tailwind which classes to generate as much as possible.

安全列表是最后的手段，只应在无法扫描某些内容以查找类名的情况下使用。这些情况很少见，你几乎不需要此功能。

¥Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.

如果你需要确保 Tailwind 生成内容文件中不存在的某些类名，请使用 safelist 选项：

¥If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use the safelist option:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

这可能有用的一个示例是，如果你的站点显示用户生成的内容，并且你希望用户能够在其内容中使用一组受限的 Tailwind 类，而这些类可能不存在于你自己站点的源文件中。

¥One example of where this can be useful is if your site displays user-generated content and you want users to be able to use a constrained set of Tailwind classes in their content that might not exist in your own site’s source files.

​使用正则表达式

¥Using regular expressions

Tailwind 支持基于模式的安全列表，适用于需要将大量类列入安全列表的情况：

¥Tailwind supports pattern-based safelisting for situations where you need to safelist a lot of classes:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ],
  // ...
}

模式只能匹配基本工具名称，如 /bg-red-.+/，如果模式包含变体修饰符，如 /hover:bg-red-.+/，则不会匹配。

¥Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.

如果你想强制 Tailwind 为任何匹配的类生成变体，请使用 variants 选项包含它们：

¥If you want to force Tailwind to generate variants for any matched classes, include them using the variants option:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    },
  ],
  // ...
}

​丢弃类

¥Discarding classes

由于 Tailwind 使用一种非常简单的方法来检测内容中的类名，你可能会发现生成了一些你实际上并不需要的类。

¥Since Tailwind uses a very simple approach to detecting class names in your content, you may find that some classes are being generated that you don’t actually need.

例如，此 HTML 仍会生成 container 类，即使该类实际上并未被使用：

¥For example, this HTML would still generate the container class, even though that class is not actually being used:

<div class="text-lg leading-8 text-gray-600">
  Every custom pool we design starts as a used shipping container, and is
  retrofitted with state of the art technology and finishes to turn it into
  a beautiful and functional way to entertain your guests all summer long.
</div>

当某些类与某些现有 CSS 冲突时，你可能还想阻止 Tailwind 生成这些类，但你不想走得更远以至于为所有 Tailwind 类添加前缀。

¥You may also want to prevent Tailwind from generating certain classes when those classes would conflict with some existing CSS, but you don’t want to go so far as to prefix all of your Tailwind classes.

在这些情况下，你可以使用 blocklist 选项告诉 Tailwind 忽略它在你的内容中检测到的特定类：

¥In these situations, you can use the blocklist option to tell Tailwind to ignore specific classes that it detects in your content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  blocklist: [
    'container',
    'collapse',
  ],
  // ...
}

blocklist 选项仅影响将由 Tailwind 生成的 CSS，而不影响你自己创作或从其他库导入的自定义 CSS。

¥The blocklist option only affects CSS that would be generated by Tailwind, not custom CSS you’ve authored yourself or are importing from another library.

与 safelist 不同，blocklist 选项仅支持字符串，你不能使用正则表达式来阻止类。

¥Unlike safelist, the blocklist option only supports strings, and you cannot block classes using regular expressions.

​转换源文件

¥Transforming source files

如果你以可编译为 HTML 的格式（如 Markdown）创作内容，那么在扫描内容以查找类名之前将该内容编译为 HTML 通常是有意义的。

¥If you’re authoring content in a format that compiles to HTML (like Markdown), it often makes sense to compile that content to HTML before scanning it for class names.

在提取类之前，使用 content.transform 选项转换与特定文件扩展名匹配的任何内容：

¥Use the content.transform option to transform any content matching a specific file extension before extracting classes:

const remark = require('remark')

module.exports = {
  content: {
    files: ['./src/**/*.{html,md}'],
    transform: {
      md: (content) => {
        return remark().process(content)
      }
    }
  },
  // ...
}

使用 content.transform 时，你需要使用 content.files 提供源路径，而不是作为 content 下的顶层数组。

¥When using content.transform, you’ll need to provide your source paths using content.files instead of as a top-level array under content.

​自定义提取逻辑

¥Customizing extraction logic

使用 extract 选项覆盖 Tailwind 用于检测特定文件扩展名的类名的逻辑：

¥Use the extract option to override the logic Tailwind uses to detect class names for specific file extensions:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    files: ['./src/**/*.{html,wtf}'],
    extract: {
      wtf: (content) => {
        return content.match(/[^<>"'`\s]*/g)
      }
    }
  },
  // ...
}

这是一项高级功能，大多数用户不需要它 - Tailwind 中的默认提取逻辑几乎适用于所有项目。

¥This is an advanced feature and most users won’t need it — the default extraction logic in Tailwind works extremely well for almost all projects.

与转换一样，使用 content.extract 时，你需要使用 content.files 提供源路径，而不是作为 content 下的顶层数组。

¥As with transforming, when using content.extract, you’ll need to provide your source paths using content.files instead of as a top-level array under content.

​故障排除

¥Troubleshooting

​不生成类

¥Classes aren’t generated

如果 Tailwind 没有生成类，请确保你的 content 配置正确并且匹配所有正确的源文件。

¥If Tailwind isn’t generating classes, make sure your content configuration is correct and matches all of the right source files.

一个常见的错误是缺少文件扩展名，例如，如果你为 React 组件使用 jsx 而不是 js：

¥A common mistake is missing a file extension, for example if you’re using jsx instead of js for your React components:

module.exports = {
  content: [
    './src/**/*.{html,js}',
    './src/**/*.{html,js,jsx}'
  ],
  // ...
}

或者创建一个最初未涵盖的新文件夹中间项目并忘记将其添加到你的配置中：

¥Or creating a new folder mid-project that wasn’t covered originally and forgetting to add it to your configuration:

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './util/**/*.{html,js}'
  ],
  // ...
}

也可能是你正在尝试使用动态类名，这不会起作用，因为 Tailwind 实际上不会评估你的源代码，只能检测静态的完整类字符串。

¥It could also be that you are trying to use dynamic class names, which won’t work because Tailwind doesn’t actually evaluate your source code and can only detect static unbroken class strings.

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

确保在代码中始终使用完整的类名：

¥Make sure you always use complete class names in your code:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

阅读我们关于 动态类名 的文档了解更多详情。

¥Read our documentation on dynamic class names for more details.

​样式在无限循环中重建

¥Styles rebuild in an infinite loop

如果你的 CSS 似乎在无限循环中重新构建，那很有可能是因为你的构建工具在 注册 PostCSS 依赖 时不支持 glob 选项。

¥If your CSS seems to be rebuilding in an infinite loop, there’s a good chance it’s because your build tool doesn’t support the glob option when registering PostCSS dependencies.

许多构建工具（例如 webpack）不支持此选项，因此我们只能告诉他们监视特定文件或整个目录。例如，我们不能告诉 webpack 只查看目录中的 *.html 个文件。

¥Many build tools (such as webpack) don’t support this option, and as a result we can only tell them to watch specific files or entire directories. We can’t tell webpack to only watch *.html files in a directory for example.

这意味着如果构建 CSS 导致这些目录中的任何文件发生更改，将触发重建，即使更改的文件与 glob 中的扩展名不匹配。

¥That means that if building your CSS causes any files in those directories to change, a rebuild will be triggered, even if the changed file doesn’t match the extension in your glob.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // With some build tools, your CSS will rebuild
    // any time *any* file in `src` changes.
    './src/**/*.{html,js}',
  ],
  // ...
}

因此，如果你正在观察 src/**/*.html 的变化，但你正在将 CSS 输出文件写入 src/css/styles.css，你将使用某些工具获得无限重建循环。

¥So if you are watching src/**/*.html for changes, but you are writing your CSS output file to src/css/styles.css, you will get an infinite rebuild loop using some tools.

理想情况下，我们可以在控制台中就此向你触发警告，但许多工具都非常好地支持它（包括我们自己的 CLI 工具），而且我们没有可靠的方法来检测你正在使用的构建工具。

¥Ideally we could warn you about this in the console, but many tools support it perfectly fine (including our own CLI tool), and we have no reliable way to detect what build tool you are using.

要解决此问题，请在 content 配置中使用更具体的路径，确保仅包含在构建 CSS 时不会更改的目录：

¥To solve this problem, use more specific paths in your content config, making sure to only include directories that won’t change when your CSS builds:

module.exports = {
  content: [
    './src/**/*.{html,js}',
    './src/pages/**/*.{html,js}',
    './src/components/**/*.{html,js}',
    './src/layouts/**/*.{html,js}',
    './src/index.html',
  ],
  // ...
}

如有必要，请调整你的实际项目目录结构，以确保你可以以模板文件为目标，而不会意外捕获你的 CSS 文件或其他构建工件（如清单文件）。

¥If necessary, adjust your actual project directory structure to make sure you can target your template files without accidentally catching your CSS file or other build artifacts like manifest files.

如果你绝对不能更改你的内容配置或目录结构，那么最好的办法是使用具有完整 glob 支持的工具单独编译你的 CSS。我们建议使用 Tailwind CLI，这是一种快速、简单、专门构建的工具，用于使用 Tailwind 编译 CSS。

¥If you absolutely can’t change your content config or directory structure, your best bet is to compile your CSS separately with a tool that has complete glob support. We recommend using Tailwind CLI, which is a fast, simple, purpose-built tool for compiling your CSS with Tailwind.

​它只是不能正常工作

¥It just isn’t working properly

如果你遇到奇怪的、难以描述的输出问题，或者事情看起来根本无法正常工作，这很可能是因为你的构建工具没有正确（或根本）不支持 PostCSS 依赖消息。目前已知的一个例子是 模版。

¥If you are experiencing weird, hard to describe issues with the output, or things just don’t seem like they are working at all, there’s a good chance it’s due to your build tool not supporting PostCSS dependency messages properly (or at all). One known example of this currently is Stencil.

当你遇到这类问题时，我们建议你使用 Tailwind CLI 单独编译你的 CSS，而不是尝试将 Tailwind 集成到你现有的工具中。

¥When you are having these sorts of issues, we recommend using Tailwind CLI to compile your CSS separately instead of trying to integrate Tailwind into your existing tooling.

你可以使用像 npm-run-all 或 concurrently 这样的包来编译你的 CSS 以及你通常的开发命令，方法是将一些脚本添加到你的项目中，如下所示：

¥You can use packages like npm-run-all or concurrently to compile your CSS alongside your usual development command by adding some scripts to your project like this:

// package.json
{
  // ...
  "scripts": {
    "start": "concurrently \"npm run start:css\" \"react-scripts start\"",
    "start:css": "tailwindcss -o src/tailwind.css --watch",
    "build": "npm run build:css && react-scripts build",
    "build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",
  },
}

无论哪种方式，请务必选择 检查现有问题 或 开一个新的，以便我们找出问题并尝试提高与你使用的任何工具的兼容性。

¥Either way, please be sure to check for an existing issue or open a new one so we can figure out the problem and try to improve compatibility with whatever tool you are using.