🐈

Vue 3 x Vite 2 x Tailwind CSS 3 の SPA 開発環境をしゅっとつくる3分間

2022/01/13に公開

最速でなにか作りたいとき、Vue 3 と Tailwind CSS の開発環境をしゅっと作ります。（３分くらいかな）

vue3 の開発環境

まずは create-vue を利用して linter・TypeScript・vue-router・Pinia の環境を対話形式で作っていきます。

npm init vue@3

これで Vue 3 と SPA 開発に必要なものがだいたい揃います。
Vite が爆速なのが最高◎

create-vue に合わせてあげる必要があるので、一手間必要です。

パッケージをインストールします。

yarn add --dev tailwindcss postcss autoprefixer

Tailwind CSS をセットアップします。

npx tailwindcss init -p

content を create-vue で作ったファイル構成に合わせます。

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/assets/base.css に tailwindディレクティブを追記します。

src/assets/base.css

/**
 * Tailwind CSS
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

以上です。

ということで、しゅっと Vue 3 の SPA 開発環境ができました。

おわります。