소개

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.

+ [email protected]
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 생활을

끝