https://www.tailwindcss.cn/

Document address

https://www.tailwindcss.cn/

The steps to use Tailwind CSS in a Vue 3 project are as follows:

Install

First, open a terminal/command prompt in the project root directory and run the following command to install Tailwind CSS:

npm install tailwindcss

Or if you are using Yarn:

yarn add tailwindcss

Configuration

Run the following command to set up a PostCSS configuration file (such as postcss.config.js or .postcssrc) for your project:

npx tailwindcss init -p

By default, this command will create a Tailwind configuration file named tailwind.config.js and a PostCSS configuration file named postcss.config.js in the project root directory.

Edit the postcss.config.js file and add Tailwind CSS to the plugins array:

module.exports = {
    
    
  plugins: {
    
    
    tailwindcss: {
    
    },
    autoprefixer: {
    
    },
  },
}

use

Create a global CSS file (for example, src/assets/css/tailwind.css) and import the basic styles, components, and utilities of Tailwind CSS at the top of the file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

In the project entry file (such as src/main.js or src/main.ts), import the created global CSS file into the project:

import '@/assets/css/tailwind.css';

Use Tailwind CSS classes to build your Vue 3 components.
For example, in a Vue 3 component:

<template>
  <div class="container mx-auto">
    <h1 class="text-3xl font-bold mb-4">Hello, Vue 3 with Tailwind CSS!</h1>
    <button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>
  </div>
</template>

Now, you have successfully introduced Tailwind CSS in your Vue 3 project. You can use the power of Tailwind CSS to build modern user interfaces.