- 定制化
- 内容配置
定制化
内容配置
为你的项目配置内容源。
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}'
],
// ...
}路径配置为 glob 模式，使得在不进行大量配置的情况下即可匹配项目中的所有内容文件：
🌐 Paths are configured as glob patterns, making it easy to match all of the content files in your project without a ton of configuration:
- 使用
*来匹配除斜杠和隐藏文件之外的任何内容 - 使用
**来匹配零个或多个目录 - 在
{}之间使用逗号分隔的值来与选项列表匹配
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:
如适用，请记得包含你的 HTML 入口点
module.exports = {
content: [
'./public/index.html',
'./src/**/*.{html,js}',
],
// ...
}
如果你有任何操作 HTML 以添加类的 JavaScript 文件，请确保也包含它们：
🌐 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 来扫描你的 templates，也就是你的类名被使用的地方，而不是 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.
切勿在你的内容配置中包含 CSS 文件
/** @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:
不要使用 props 动态构建类名
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.
如果你在使用工作区的 monorepo 中工作，你可能需要使用 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' },
],
// ...
}这种情况的有效用例不多——通常你真正想要的是 安全列入白名单。
🌐 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>你可能还想防止 Tailwind 生成某些类，当这些类与现有的 CSS 冲突时，但你又不想将所有 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 文件或其他构建生成的文件，例如 manifest 文件。
🌐 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.
如果你绝对无法更改内容配置或目录结构，最好的方法是使用支持完整通配符的工具单独编译 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 依赖消息 (甚至完全不支持)。目前已知的一个例子是 Stencil。
🌐 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.