Tailwind CSS is a styling framework that we configure with front-end frameworks for better UI. We can easily use classes and styles using Tailwind as inline styles or classes.
When it comes to integration, similar to any other application, integrating Tailwind with Vue.js is also easy and follows almost the same process.
Here’s how it works:
Step 1: Install the necessary packages.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Step 2: Open the generated tailwind.config.js file.
Step 3: Initialize Tailwind CSS.
npx tailwindcss init -p
Step 4: Inside tailwind.config.js, add the following configuration:
// tailwind.config.js
module.exports = {
content: [‘./index.html’, ‘./src/**/*.{vue,js,ts,jsx,tsx}’],
darkMode: false, // or ‘media’ or ‘class’
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Step 5: Include Tailwind in your CSS file.
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Following these steps will set up Tailwind CSS with your Vue.js application, allowing you to use its utility-first classes to style your components efficiently.
Finally check by adding any tailwind css and ensure tailwind css is working.