JavaScript Framwwork

CSS Framework: TailwindCSS JavaScript Framwwork
Categories:
Tags:

Vue.js with tailwindcss

Install tailwindcss with the Vue project

A. To new project

npm create vite@latest my-project -- --template vue

B. To current project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Setting tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Setting main.css

/* src/assets/main.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

Setting postcss.config.js

// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

Create custom component with tailwindcss

/* src/assets/main.css */
@tailwind base;

@tailwind components;

@tailwind utilities;


.btn {
	@apply no-underline uppercase py-2 px-6 rounded-full text-xs;
}

.btn-blue {
	@apply bg-blue-500 text-white;
}

.btn-red {
	@apply bg-red-500 text-white;
}

<style lang="postcss" scoped>
  .btn-red {
    @apply bg-red-800 text-white;
  }
</style>

Reference