Início / coding / Perguntas / 77388922
Accepted
podeig
Asked: 2023-10-30 21:09:00 +0800 CST

Como publicar todas as classes personalizadas do tema no CSS do Tailwind?

  • 772

Eu crio uma biblioteca de componentes e quero publicar todas as classes personalizadas como "text-primary", "text-secondary", "bg-primary", "text-primary-100", "text-primary-200" e assim por diante. ..

O Tailwind pega todas as classes usadas no código, mas preciso gerar todas as classes customizadas também, mesmo as que as utilizam.

Meu 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,
  },
};

Meu comando de construção:

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

Eu apreciaria qualquer ajuda! Obrigado! :)

tailwind-css

1 respostas

  1. Best Answer

    Eu recomendo que você use o plugin tailwind-safelist-generator. Ele permite carregar classes por um padrão ou diretamente das próprias classes.

    Você pode usá-lo como:

    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
      ],
    }),
  ],
};

    Então no seu contentvocê só precisa adicionar o caminho para o seu arquivo safelist.

    No entanto, há mais padrões que você pode usar aqui: tailwind-safelist-generator

    Espero que resolva seu problema.

    • 2

relate perguntas