Open2023/11/08にコメント追加5

Nuxt3 + TailwindCSS セットアップ

Nuxt install

npx nuxi init sample-app
cd sample-app
npm install
npm run dev

つきやま

Tailwind install

npm install -D tailwindcss postcss@latest autoprefixer@latest

tailwind.config

rootディレクトリにtailwind.config.js追加

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./*.vue",
    "./components/**/*.vue",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind.css

~/assets/css/tailwind.css追加

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

nuxt.config追記

nuxt.config.ts

export default defineNuxtConfig({
  // ......
  postcss: {
    plugins: { tailwindcss: {} },
  },
  css: ['~/assets/css/tailwind.css'],
  // ......
})

つきやま

Linter Prettier 設定

npm install --save-dev eslint eslint-plugin-vue @nuxtjs/eslint-config @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-plugin-prettier eslint-config-prettier

.eslintrc.json

rootディレクトリに.eslintrc.jsonを追加する

.eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  },
  "extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:vue/vue3-recommended"],
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "no-console": "off",
    "vue/no-v-html": "off",
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "@typescript-eslint/no-unused-vars": 0,
    "vue/padding-line-between-blocks": ["error", "always"],
    "vue/component-tags-order": ["error", { "order": ["script", "template", "style"] }],
    "vue/multi-word-component-names": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/html-self-closing": [
      "error",
      {
        "html": {
          "void": "always"
        }
      }
    ]
  }
}

.prettierrc

rootディレクトリに.prettierrcを追加

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 120,
  "plugins": ["prettier-plugin-tailwindcss"]
}

package.json修正

package.json

"lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
"lintfix": "eslint --ext .js,.ts,.vue --ignore-path .gitignore . --fix"

prettier-plugin-tailwindcss インストール

npm install prettier-plugin-tailwindcss --save-dev

typescriptのバージョン変更

これしないとWarning出る

npm install typescript@4.3.5 --save-dev

つきやま