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',
],

深度类识别

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",
    },
}
打印页面
上一页
下一页
广告