VuePress で Windi CSS (Tailwind) を利用できるように設定

vuePress 公開日: 2022-04-10 更新: 2022-04-25

• Tailwind CSS 公式ドキュメント
• Install Tailwind CSS with Vue 3 and Vite
• doc- reference styles
• Windi CSS 次世代 Tailwind CSS コンパイラ
• VuePress × Windi CSS (Tailwind)

Windi CSS (Tailwind)をインストール

npm i -D vite-plugin-windicss windicss

VuePress の設定ファイル .vuepress/config.ts における Vite の設定

通常 vite.config.js に記述する内容は docs/.vuepress/config.ts の bundlerConfig.viteOptions で設定する

⛔ VuePress を使用せずに Vite + Windi CSS を利用する場合の記述

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

VuePress + Vite + Windi CSS の場合

doc- Integration for Vite

// docs/.vuepress/config.ts
// https://v2.vuepress.vuejs.org/guide/configuration.html#config-file
import { defineUserConfig, viteBundler } from 'vuepress'
import WindiCSS from 'vite-plugin-windicss'
import { path } from '@vuepress/utils'

export default defineUserConfig({
  // ...

  // === bundler config === https://v2.vuepress.vuejs.org/reference/bundler/vite
  bundler: viteBundler({
    viteOptions: {
      plugins: [
        WindiCSS({
          preflight: false, //  https://windicss.org/integrations/vite.html#preflight-style-reseting
          scan: { // https://windicss.org/integrations/vite.html#scanning
            include: [path.resolve(__dirname, './**/*.{vue,html,md}')],
          },
          config: { // Windi CSS, TailwindCSS のオプションを記述する
            attributify: true, // https://windicss.org/integrations/vite.html#attributify-mode
          },
        }),
      ],
    },
    // vuePluginOptions: {},
  }),

  // ...

Windi CSS (Tailwind)を使用したいファイル（コンポーネントなど）で 'virtual:windi.css' をインポート

Windi CSS (Tailwind)を使用したいファイルの scriptタグで 'virtual:windi.css' をインポートすれば Tailwind のCSS クラスを利用可能

// docs/.vuepress/components/MyCounter.vue
<script setup lang="ts">
import 'virtual:windi.css'
import { ref } from 'vue'

const count = ref(100)

</script>

<template>
  <div class="w-3/5 rounded-3xl bg-gray-200 p-3 text-center">

    <div class="mb-3 text-xl font-extrabold text-green-500">
      {{ count }}
    </div>

    <button @click="count+=100"
      bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
      text="sm white"
      font="mono light"
      p="y-2 x-4"
      m="b-3"
      border="2 rounded blue-200"
    >
      カウントアップ +100
    </button>
  </div>
</template>

↑ボタンをクリックすると＋100されるだけのコンポーネントの使用例

<MyCounter />

100

Tailwind v2.1 cheatsheet

vscode 拡張- Windi CSS Intellisense