主页 / coding / 问题 / 77388922
Accepted
podeig
Asked: 2023-10-30 21:09:00 +0800 CST

如何在 Tailwind css 中发布主题中的所有自定义类？

  • 772

我创建组件库并想要发布所有自定义类，例如“text-primary”、“text-secondary”、“bg-primary”、“text-primary-100”、“text-primary-200”等。 ..

Tailwind 接受代码中使用的所有类，但我也需要生成所有自定义类，即使使用它们。

我的 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#FF9225',
        primaryDark: '#EF7C09',
        primaryLight: '#FFC68C',
        secondary: '#14487E',
        secondaryLight: '#EDF7FF',
      },
    },
  },
  plugins: [],
  prefix: 'bui-',
  corePlugins: {
    preflight: false,
  },
};

我的构建命令：

"build": "tsc --p ./tsconfig-build.json && vite build && npx tailwindcss -i ./src/input.css -o ./dist/output.css",

我将不胜感激任何帮助！谢谢你！:)

tailwind-css

1 个回答

  1. Best Answer

    我推荐你使用该插件tailwind-safelist-generator。它允许您通过模式或直接从类本身加载类。

    您可以像这样使用它：

    tailwind.config：

    /** @type {import('tailwindcss').Config} */
// If you are using Typescript, sadly 'tailwind-safelist-generator' does not support typescript for now ... You will need to use @ts-ignore
// You can also create `tailwind-safelist-generator.d.ts` and `declare module`
// @ts-ignore
import tsg from 'tailwind-safelist-generator';

export default {
  ...
  plugins: [
    tsg({
      path: 'path/to/your/safelist.txt',
      patterns: [
        'bg-{colors}', // load every bg colors classes
      ],
    }),
  ],
};

    然后在你的中content你只需要将路径添加到你的safelist.

    但是，您可以在文档中使用更多模式：tailwind-safelist-generator

    希望它能解决您的问题。

    • 2

相关问题