Vite + Vue3 + Windi.CSS の環境構築

はじめに

Windi.CSSを使ってみたくてVite + Vue3 + Windi.CSSで環境構築をしたので手順をまとめました。
Windi.CSSについては別で記事を書きます

プロジェクト作成

今回はnpmを使ってインストールしました。

$ npm init @vitejs/app
? Project name: › windi-sample
    vanilla
❯   vue
    react
    preact
    lit-element
    svelte

? Select a variant: › - Use arrow-keys. Return to submit.
❯   vue
    vue-ts

プロジェクト名はお好きにつけてください。（僕はwindi-sampleにしました）
ライブラリはvueを選びました。(vanillaはネイティブのJSらしいです)

$ npm init @vitejs/app
npx: 6個のパッケージを2.176秒でインストールしました。
✔ Project name: … windi-sample
✔ Select a framework: › vue
✔ Select a variant: › vue

Scaffolding project in /Users/tsukiyama/windi-sample...

Done. Now run:

  cd windi-sample
  npm install
  npm run dev

無事に作成できたので指定されたコマンドを打ちます

$ cd windi-sample
$ npm install

$ npm run dev

 > @0.0.0 dev /Users/tsukiyama/windi-sample
 > vite

 Pre-bundling dependencies:
   vue
 (this will be run only when your dependencies or config have changed)

  vite v2.3.7 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

npm run devも実行できたのでコントロール+Cで抜けます

Windi CSS インストール

ここから公式ドキュメントに沿ってWindi.CSSのインストールをしていきます。

$ npm i vite-plugin-windicss -D

npm WARN @0.0.0 No description
npm WARN @0.0.0 No repository field.
npm WARN @0.0.0 No license field.

+ vite-plugin-windicss@1.0.4
added 31 packages from 35 contributors and audited 88 packages in 3.742s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

次にvite.config.jsを編集します(コメント箇所を追記しました)

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from "vite-plugin-windicss" // <- windicss を import

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        WindiCSS(), // <- WindiCSSを追加
    ],
});

最後にsrc/main.jsでvirtual:windi.cssをimportします。(コメント箇所を追記しました)

main.js

import { createApp } from 'vue'
import App from './App.vue'
import "virtual:windi.css" // <- windi.css を import

createApp(App).mount('#app')

これでWindi.CSSが使えるようになりました。

使ってみる

ソースコード

App.js

<template>
  <div class="py-10">
    <img alt="Vue logo" class="mb-4 mx-auto" src="./assets/logo.png" />
    <h1 class="font-bold text-2xl italic text-center mb-8">
      Vite + Vue3 + Windi.CSS
    </h1>
    <a
      href="https://windicss.org/"
      class="bg-gradient-to-r from-green-400 to-blue-500 w-200px block mx-auto px-4 py-3 text-white text-center italic rounded cursor-default transition-all duration-400 hover:rounded-2xl"
    >
      Windi.CSS
    </a>
  </div>
</template>

画面

ボタンのスタイルは公式ドキュメントに載っているのをそのまま使いました

さいごに

Windi.CSSを使ってみたくて環境構築をしました
まだ使いこなせていないので、また別でWindi.CSSについての記事を書いていきます
みなさんも良いWindiライフを

おわり