在vue项目中使用TailwindCSS

合集 - TailwindCSS(2)

1.在vue项目中使用TailwindCSS2024-01-03

2.定制TailwindCSS2024-01-03

收起

在vue项目中使用

创建vue项目

pnpm create vue@latest

安装Tailwind CSS

安装及其对等依赖，然后生成tailwind.config.js和postcss.config.js文件

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置模板路径

修改tailwind.config.js

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

将Tailwind指令添加到css中

1. 在src目录下新建一个tailwind.css样式文件，内容如下：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

2. 在main.ts中引入tailwind.css文件

   import './tailwind.css'

开始在项目中使用

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>