Перейти к основному содержимому

↘ Few steps to create Vue app with Tailwind CSS and PostCSS

· 2 мин. чтения
Yevgeniy Goncharov
Yevgeniy Goncharov
Maintainer of OpenBLD.net

Few steps to create Vite + Vue + Tailwind + PostCSS

Intro​

Vite + Vue 3 + Tailwind 4 CSS + PostCSS is a powerful combination for modern web development. This guide will help you set up your development environment quickly and efficiently.

Easy steps to create Vue app with Tailwind CSS and PostCSS​

Install Vite + Vue 3:

npm create vite@latest

Next, you can choose a project name and select the Vue engine (TS or JS), example:

$ npm create vite@latest

✔ Project name: … webui
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Run app:

cd webui
npm install

Install Tailwind CSS and PostCSS​

Current Tailwind CSS version is 4, so you can install it with the following command:

npm install tailwindcss @tailwindcss/vite

Add the @tailwindcss/vite plugin in to vite.config.js, my config example:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  build: {
    outDir: path.resolve(__dirname, '../web/dist'),
    emptyOutDir: true,
  },
})

PostCSS​

npm install tailwindcss @tailwindcss/postcss postcss

Add @tailwindcss/postcss to your postcss.config.mjs:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

Tailwind CSS config​

Create a tailwind.config.js file in the root of your project (if it doesn't exist):

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

Attach tailwind to your app​

Create a src/assets/css/tailwind.css file:

touch src/assets/tailwind.css

And add the following content:

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

Then import this file in your main entry file, usually src/main.js or src/main.ts:

import './assets/tailwind.css'
npm run dev

Additional information about Tailwind CSS and PostCSS can be found in the official documentation:

Done!