Tsukamoto Makoto

Tailwind CSS (Vue3 + Vite)の環境構築とか、使ってみた感想

2021/06/18

Table of Contents

導入
Vueでの利用
コンセプト
感想

導入

Install Tailwind CSS with Vue 3 and Vite - Tailwind CSSを元に、npm init @vitejs/app <project名>から簡単に導入することができます。今回は以下の構成で行いました。

➜ npm init @vitejs/app app       
Need to install the following packages:
  @vitejs/create-app
Ok to proceed? (y) y
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

Scaffolding project in /path/to/vite-vue3-tailwindcss/app...

Done. Now run:

  cd app
  npm install
  npm run dev

そのまま、「Setting up Tailwind CSS」と「Include Tailwind in your CSS」まで進めると、使えるようになっているかと思います。

起動時、hostやportを指定したい場合、package.jsonのdevの部分で--portや--hostオブションが準備されています。


{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --host 0.0.0.0 --port 3000",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  ...
}

Viteでaliasの設定

公式のとおりにやると、どうもimport file from /@/path/to/fileとやらなきゃいけないようです。

けどこの書き方が嫌だったので、webpackでやっていた@/components/Hoge.vueのようにaliasを設定したい。

その場合、vite.config.jsで以下の設定をすれば、利用できます。（ちょっとめんどくさい）


import path from "path";

const aliasRegx = /^@\//;

const resolver = {
  alias(id) {
    if (id.match(aliasRegx)) {
      return path.resolve("/src", id.replace(aliasRegx, ""));
    }
  },
};

module.exports = {
  resolvers: [resolver],
};

Vueでの利用

VueでTailwind CSSを利用する時は、コンポネントごとにクラスを集約して、画面を構成していくことになります。

.
├── App.vue
├── components
│   └── Button.vue
├── main.ts
├── views
│   └── Page.vue

<!-- components/Button.vue -->

<template>
  <button class="inline-block p-3 ..." @click="clicked">
    ボタン
  </button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    clicked: {
      type: Function,
      default: {}
    }
  }
</script>

<!-- views/Page.vue -->

<template>
  <div class="flex">
    <div class="relative w-full">
      <Button :clicked="clicked" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Button from "@/components/Button.vue"

export default defineComponent({
  components: {
    Button,
  },
  setup() {
    const clicked = () => alert("click!")

    return {
      clicked
    }
  },
})
</script>

Tailwindでは、cssの影響範囲を極めて小さく収めることができます。

従来のやり方だと、cssの名前つけに苦労したり、影響範囲を考えたりと少し気を使うところがあったかと思いますが、気にしなくて良いのがいいですね。

コンセプト

これまでは、利用したいCSSフレームワークに追加でカスタマイズして、画面を作成していく形だったと思います。

しかし、Tailwind CSSでは最小単位のクラスをかき集め、一つのコンポネントとして管理していきます。

例：

従来

<template>
  <a class="btn" href="https://example.com">
    click
  </a>
</template>

<style scoped>
.btn {
  display: inline-block;
  padding: 0.5em 1em;
  background: #63B3ED;
  color: #FFF;
  border-bottom: solid 4px #BEE3F8;
  border-radius: 3px;
  cursor: pointer;
}
.btn:active {
  transform: translateY(4px);
  border-bottom: none;
}
</style>

Tailwind CSS

<template>
  <a class="inline-block px-2 py-4 text-white bg-blue-400 border-b-4 border-blue-200 rounded-md cursor-pointer active:translate-y-4 active:border-0"
     href="https://example.com">
    Click
  </a>
</template>