独学者Fossa

独学していることなど

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も、試そうと思ったのですが、次の機会にします。