Este artigo detalha o procedimento completo para criar uma predefinição no Tailwind.
Como criar um “Preset” no Tailwind?
Vento de cauda “ Predefinições ” são considerados os objetos de configuração regulares que especificam a mesma configuração especificada no arquivo de configuração “tailwind.config.js”. O arquivo “predefinido” não é criado por padrão, mas pode ser criado seguindo as etapas abaixo:
Passo 1: Crie um arquivo “Preset”
Primeiro, crie um “ preset.js ” no projeto Tailwind e adicione todas as opções de configuração desejadas, como extensões, substituições de tema, adição de plug-ins e muito mais:
// Exemplo de predefinição
módulo. exporta = {
tema : {
cores : {
azul : {
luz : '#85d7ff' ,
PADRÃO : '#1fb6ff' ,
escuro : 'sela #009' ,
} ,
rosa : {
luz : '#ff7ce5' ,
PADRÃO : '#ff49db' ,
escuro : '#ff16d1' ,
} ,
cinza : {
mais escuro : '#1f2d3d' ,
escuro : '#3c4858' ,
PADRÃO : 'em #c0cc' ,
luz : '#e0e6ed' ,
mais leve : '#f9fafc' ,
}
} ,
família de fontes : {
sem : [ 'gráfico' , 'sem serifa' ] ,
} ,
Imprensa ' Ctrl+S ” para salvar o arquivo acima.
Etapa 2: edite o arquivo “tailwind.config.js”
Em seguida, navegue até o “ tailwind.config.js ” arquivo de configuração, especifique o nome dos caminhos de modelo, bem como especifique o “ preset.js ” com a extensão “ predefinições ” palavra-chave:
módulo. exporta = {
contente : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
predefinições : [
( 'preset.js' )
]
}
Imprensa ' Ctrl+S ” para salvar o arquivo.
Etapa 3: execute o aplicativo
Agora, execute o existente “ projeto rápido ” no servidor de desenvolvimento digitando o seguinte comando:
npm run dev 
Por fim, clique no link “localhost” para mostrar a saída.
Saída
Como visto, a saída retorna um projeto vite com estilo “Tailwind CSS”.
Conclusão
No Tailwind, crie um “ predefinido ” no projeto e especifique todas as configurações do “ tailwind.config.js ” arquivo nele. Depois disso, especifique o arquivo “preset.js” no arquivo “tailwind.config.js” com a ajuda da palavra-chave “preset”. O arquivo “preset.js” recém-criado incorporará todo o CSS personalizado no modelo especificado, assim como o arquivo “tailwind.config.js”. Este artigo demonstrou o procedimento completo para criar uma predefinição no Tailwind.