🔖

vue3+webpack+tailwindcssの環境構築

2022/06/23に公開

Vue.js

webpack

Tailwind CSS

tech

環境

「Webアプリ開発環境構築(vue3+typescript by webpack)」参照。

参考

最終ファイル構成

手順

1.インストール

npm install tailwindcss

2.src内にindex.css作成

@tailwind base;
@tailwind components;
@tailwind utilities;

3.index.jsにindex.cssをインポート

import { createApp } from "vue"
import top from "../src/top.vue"
import './index.css' //追加

const app = createApp(top);
app.mount("#app");

4.tailwind.config.js生成

npx tailwindcss init

tailwind.config.js

module.exports = {
  content:[
    "./dist/**/*.{html,js}" 
  ],
  future: {},
  // purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

5.css-loaderとMiniCssExtractPluginとpostcss-loaderをインストール

npm install --save-dev css-loader

npm install --save-dev mini-css-extract-plugin

npm install --save-dev postcss-loader postcss

6.webpack加工

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader');　　　　

module.exports = {
  entry:'./src/index.js',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js',
  },
  resolve:{　　　　　　　　　　　　　　　　　　
    extensions: [".vue", ".js"],
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  require('tailwindcss'),
                  require('postcss-nested'),
                ],
              },
            },
          }
        ],
      },
      {　　　　　　　　　　　　　　　　　　　　
        test: /\.vue$/,
        loader: 'vue-loader'
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'assets/css/index.css',
    }),

    new VueLoaderPlugin()　　　　　　　　　　　
  ],
}

7.vueファイルにtailwincscc入力

top.vue

<template>
  <h1 class="text-5xl font-bold underline">
    top
  </h1>
</template>

8.ビルド(npm run build)して、distフォルダにcssファイルが生成されている確認
9.8で生成したcssファイルをhtmlに反映

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./dist/assets/css/index.css">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/main.js"></script>
</body>
</html>

7.完成
ビルド後、以下のような画面が表示されればOK

環境

参考

最終ファイル構成

手順

Discussion