Vue 3 with Vite, Tailwind CSS, ESLint and Prettier

Create a Vue 3 project with Vite

yarn create vite --template vue

Install Tailwind CSS

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Initialize Tailwind CSS. Inside project folder:

yarn tailwindcss init -p

Modify tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Create a css file and append the following:

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

Import the stylesheet in the main.js file.

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

Set up ESLint and Prettier

Install dependencies.

yarn add -D eslint eslint-config-prettier eslint-plugin-prettie eslint-plugin-vue prettier

Open terminal and configure eslint

yarn eslint --init

.eslintrc.js will be created.

Update .eslintrc.js

module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': ['error'],
  },
}

Create .prettierrc.js inside the root folder and paste the following code

module.exports = {
  semi: false,
  singleQuote: true,
  tabWidth: 4,
  trailingComma: 'none',
}

Formatting code:

yarn eslint --ext .js --ext .vue . --fix

Set up Stylelint for CSS

yarn add -D stylelint stylelint-config-standard

Create .stylelint.config.js and paste the following code

module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    indentation: 4,
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'screen',
        ],
      },
    ],
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
  },
}

VSCode Settings

Create .vscode/settings.json inside the root project folder and paste the following code

{
  "eslint.validate": ["vue", "javascript"],
  "eslint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "css.validate": false,
  "tailwindCSS.emmetCompletions": true
}

Source: https://jdmendozar.medium.com/how-to-setup-vue-3-with-vite-tailwind-and-eslint-prettier-b55644005c76