526互联

在vue项目中使用TailwindCSS

发布时间 2024-01-03 21:57:00作者: Ewar-k

在vue项目中使用

创建vue项目

pnpm create vue@latest

安装Tailwind CSS

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

pnpm install -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>