Tailwindcss getting started

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}