Tailwind CSS - 内容配置



Tailwind CSS 内容配置指定了项目的源文件。'tailwind.config.js' 文件的 Content 部分指定了所有 HTML 模板、Javascript 组件以及包含 Tailwind 类名的任何其他源文件。

Tailwind CSS config.js

内容源路径配置

'tailwind.config.js' 文件的 content 部分中的源路径配置有助于 Tailwind CSS 扫描所有 HTML、Javascript 组件以及任何包含类名的文件,以生成这些样式的相应 CSS。

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

关键点

在 Tailwind CSS 中配置内容时需要记住的关键点。

  • 使用通配符模式(**/*)递归匹配文件。
  • 使用{}和逗号分隔的值来匹配选项列表,例如 {html,js}。
  • 保持路径相对于项目根目录。

内容配置模式技巧

为了有效地配置内容,请遵循以下技巧

  • 精确:排除捕获不必要文件或目录(例如 node_modules)的广泛模式。
  • content: [ './components/**/*.{html,js}', './pages/**/*.{html,js}', './index.html', // Include specific files if needed ],
  • 包含入口点:确保您的 Tailwind 设置包含主 HTML 文件,通常位于 public/index.html。
  • content: [ './public/index.html', './src/**/*.{html,js}', ],
  • Javascript 文件:包含将类添加到 HTML 的任何 JS 文件。
  • content: [ './src/**/*.js', ],
  • 排除 CSS 文件:永远不要在内容配置中包含 CSS 文件。
  • content: [ './src/**/*.css', ],

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

深度类识别

Tailwind 使用正则表达式从源代码中提取潜在的类名,而无需解析或执行它。

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

注意:Tailwind 可以与任何语言(如 JSX)一起使用,通过在任何地方搜索类,而不仅仅是在 HTML 中。

动态类名

Tailwind 仅在您的代码中查找完整的类名。如果您使用字符串或部分构建类名。Tailwind 无法识别它们,也不会生成相应的 CSS。

创建类名时应遵循的措施。

  • 始终使用完整的类名,而不是动态构建类名。
  • <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
  • 始终将 props 映射到静态类名,而不是使用 props 来动态构建类。
  • 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>; }

使用外部库

当使用第三方库并使用您自己的自定义 CSS 为其设置样式时,请尝试不要在不使用Tailwind 的 @layer功能的情况下编写这些样式。这将使 Tailwind 更容易扫描第三方库的源代码。

@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 样式的组件,请确保已将 Tailwind 配置为扫描这些组件以查找类名。

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

如果您使用的是带有工作区的 monorepo,则可能需要使用require.resolve,以便 Tailwind 可以找到您的内容文件。

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

使用相对路径

Tailwind 默认情况下使用当前目录作为路径。为了避免问题,将 'relative' 属性设置为 'true' 以将路径绑定到 'tailwind.config.js' 文件。

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

设置原始内容

要在 Tailwind 中扫描原始内容而不是文件的内容,请使用具有 "raw" 键的对象而不是文件路径。这允许您配置 Tailwind 以扫描自定义内容。

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

安全列表类

如果您希望 Tailwind 生成内容文件中不存在的某些类名,请使用 safelist 选项。

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

使用正则表达式

Tailwind 支持基于模式的安全列表,用于您需要安全列表许多类的情况。

/** @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)/, }, ], // ... }

您可以强制 Tailwind 为某些类创建额外的样式,方法是将它们添加到 'variants' 选项中。

/** @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'], }, ], // ... }

消除类

Tailwind 可能会创建不必要的类,例如即使不使用也会生成 'container' 类,如下所示。

<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 类添加前缀,请使用blocklist选项忽略特定类。

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

源文件转换

如果您编写的內容會轉換成 HTML(例如 Markdown),請先將內容轉換成 HTML,然后再提取类。使用 'content.transform' 转换文件并使用 'content.files' 指定源路径。

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

修改提取逻辑

使用 'extract' 自定义特定文件类型的类名检测。

注意:这是一个高级功能,您需要以不同的方式指定源路径。

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

常见问题排查

以下是配置 Tailwind CSS 内容时的一些常见问题,以及避免这些问题的措施。

  • 缺少类:如果 Tailwind 没有生成类,请仔细检查您的内容配置和文件扩展名(例如,React 组件使用 'jsx' 而不是 'js'),以确保它匹配所有源文件。
  • module.exports = { content: [ './src/**/*.{html,js}', './src/**/*.{html,js,jsx}' ], // ... }
  • 动态类名:Tailwind 不支持动态类名构建。
  • <!-- Incorrect --> <div class="text-{{ error ? 'red' : 'green' }}-600"></div> <!-- Correct --> <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
  • 无限样式重建:确保您的构建工具正确支持 glob 模式。
  • content: [ './src/**/*.{html,js}', './src/pages/**/*.{html,js}', './src/components/**/*.{html,js}', './src/index.html', ],
  • 输出问题:它可能不支持 PostCSS,从而导致问题。尝试使用 Tailwind CLI 单独编译 CSS,以避免集成问题。
  • // 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", }, }
广告