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