Windi CSSを試す

windicss.org

Tailwind CSS v2を使っているのですが、Windi CSSに興味があって、試してみました。

使用環境

Name	Version
node	14.17.1
npm	7.19.0
Windi CSS	3.1.3

インストール

npm i windicss

今回は、Windi CSS CLIを使います。

オプション

オプション名	詳細
o	output file
t	add preflight
m	minify
a	attributify mode

windi.config.js

const form = require('windicss/plugin/forms')

module.exports = {
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [
    form,
  ],
  extract: {
    // accepts globs and file paths relative to project root
    include: [
      'public/**/*.html',
    ],
    exclude: [
      'node_modules/**/*',
      '.git/**/*',
    ],
  },
}

試してみます

windicss -mto public/css/windi.min.css --config windi.config.js

感想

minifyしてくれますし、formは、pluginで用意されているので、導入コストは低いと思いました。

attributify modeも、試そうと思ったのですが、次の機会にします。