Estou usando um prefixo para diferenciar meu estilo de classes de terceiros. Quando não estou usando o prefixo, isso funciona bem:
fixed h-[5px] bg-green top-0 left-0 z-1000
Ao usar o prefixo, os estilos superior e esquerdo não são gerados no arquivo CSS do Tailwind, enquanto os outros funcionam bem.
tw:fixed tw:h-[5px] tw:bg-green tw:top-0 tw:left-0 tw:z-1000
Atualização:
Estou usando @tailwinde tailwind.configporque esta é a única maneira de me livrar de todos os estilos desnecessários do Tailwind. Há um elemento de terceiros usando a classe outline(e alguns nomes de classe mais básicos do Tailwind) e o Tailwind pensa que é o seu estilo, então o Tailwind gera outlineo estilo em seu arquivo CSS, o que bagunça a interface.
Tentei usar @import "tailwindcss" prefix(tw);e outras combinações, mas dessa forma todos os estilos inúteis ficam presentes no css gerado, o que bagunça tudo.
index.csscontente:
@config "../../tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
mode: "jit",
prefix: "tw",
content: ["./src/**/*.{js,jsx,ts,tsx,css}"],
theme: {
colors: {
'green': '#4287f5'
}
}
}