Initialization the project
1mkdir tailwind
2cd tailwind
3pnpm create vite@latest my-project -- --template vue
4pnpm install -D tailwindcss postcss autoprefixer
5# this will create a `tailwind.config.js` `postcss.config.js`
6pnpm tailwindcss init -p
7pnpm run dev
config the tailwind css project
- add the package to
src/style.css
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
- config the
postcss.config.js
1export default {
2 plugins: {
3 tailwindcss: {},
4 autoprefixer: {},
5 },
6}
- config the
tailwind.config.js
1/** @type {import('tailwindcss').Config} */
2export default {
3 content: [
4 "./index.html",
5 "./src/**/*.{vue,js,ts,jsx,tsx}",
6 ],
7 theme: {
8 extend: {},
9 },
10 plugins: [],
11}