add tailwind to vue 3
Install Vue CLI globally (if not already installed):
npm install -g @vue/cli
Create a new Vue project using Vue CLI:
vue create my-vue-tailwind-project
Change into the project directory:
cd my-vue-tailwind-project
Install Tailwind CSS and its dependencies using npm:
npm install -D tailwindcss postcss autoprefixer
Create a default configuration file for Tailwind CSS:
npx tailwindcss init -p
Modify the
tailwind.config.js
file to specify the CSS file location:javascript module.exports = { content: [ "./src//*.{vue,js,ts,jsx,tsx}", "./public/index.html" ], }
Create a PostCSS configuration file (
postcss.config.js
) with Autoprefixer:javascript module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
Create a CSS file (e.g.,
src/assets/styles/tailwind.css
) and import Tailwind CSS:css @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
Import the Tailwind CSS file in your main JavaScript file (e.g.,
src/main.js
):javascript import './assets/styles/tailwind.css';
Update the
src/App.vue
file to use Tailwind CSS classes as needed.Run the Vue development server:
npm run serve
Now you can use Tailwind CSS classes in your Vue 3 project.