Миграция с 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


Ответы (0 шт):