Миграция с Tailwindcss на windicss. Как компилировать выходные классы?
Ранее при работе непосредственно с tailwind у меня был исходный src/input.css и выходной dist/output.css
В исходном inputcss я подружал классы из коллекций: @base @components @utilities, добавлял в него свои собственные css константы:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
* { /* Global setup for all components */
@apply box-border; /* Box-sizing: Border-box,
All components should calculate width/height
with padding and border width, height */
@apply m-0; /* Margin: 0
All components should not have any margins */
}
}
:root {
--color-primary-h: 150;
--color-primary-s: 84%;
--color-primary-l: 29.4%;
}
/* и так далее */
При сборке проекта, tailwind брал исходник, сверял его со своим конфигом, и пропускал через postcss, после чего выдавал некоторый выходной набор css классов в output.css
npx tailwind - i ./src/input.css -o ./dist/output.css
Cами классы подбирались в index.html через тэг
<link href="/dist/output.css" rel="stylesheet">
Захотелось рискнуть и попробовать windicss. Настроил для него конфиг:
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
/* configurations... */
extract: {
// accepts globs and file paths relative to project root
include: [
'index.html',
'src/**/*.{js,ts,jsx,tsx,html}',
],
exclude: [
'node_modules/**/*',
'.git/**/*',
]
},
// и так далее
})
Снес конфигурации postcss и tailwind, отдал сборшику Vite плагин со сылкой на конфиг
import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [ react(),
WindiCSS({
config: path.join(__dirname, "windi.config.ts"),
}),
]}
и попытался скомпилировать output:
windicss './src/input.css' -o ./dist/output.css
На что он верул мне абсолютно пустой output.
Позже попробовал скомпилировать классы с анализом всех файлов проекта вручную и он мне действительно отдал output, но с какими-то общими базовыми классами по умолчанию, которые берутся неизвестно откуда, но похоже даже не из tailwind. В любом случае все те классы которые в проекте сделаны через tailwind styled component-ы им проигнорированы, на свой собственный конфиг он тоже, при этом подзабил.
windicss 'src/**/*.{js,ts,jsx,tsx,html}' -ato dist/output.css
В общем, хотелось бы понять является windicss полноценной оберткой над tailwind и можно ли действительно заменить им родной tailwind
Вопрос в том, как компилировать input.css в output.css со всеми теми же классами, что и с родным tailwind