Vue3整合TailwindCss

前言

Tailwind CSS 是一个高度可定制的 CSS 框架，它提供了一组原子级的样式类，使得开发者可以通过组合这些类来快速构建现代化的用户界面。与传统的 CSS 框架不同，Tailwind CSS 并不提供预定义的组件或样式，而是专注于提供一组原子类，以实现更高程度的灵活性和定制性。

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

他快速、灵活、可靠，没有运行时负担。

官网https://tailwindcss.com

中文站https://tailwindcss.cn

安装Tailwindcss

npm install -D tailwindcss postcss autoprefixer

-D：–save-dev的缩写，它表示安装包作为开发依赖项，不会打包进项目

postcss：一个用于转换 CSS 的工具

autoprefixer：一个 PostCSS 插件，用于自动添加浏览器供应商前缀到 CSS 规则中，确保跨浏览器的兼容性。

初始化

执行以下命令

# -p表示用插件自动初始化，会自动生成 tailwind.config.js 和 postcss.config.js 配置文件
npx tailwindcss init -p

在 tailwind.config.js 文件中添加所有模板文件的路径:

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

将 Tailwind 指令添加到 主CSS 文件中

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

修改 main.js 文件，引入 main.css

执行 npm run dev 命令，重新构建工程。

测试

将主页面清空， 写入以下内容

<template>
    <div class="bg-green-300 inline">绿色</div>
    <div class="bg-yellow-300 ml-2 inline">黄色</div>
    <div class="bg-blue-300 ml-2 inline">蓝色</div>
</template>

• bg-green-300 : 绿色背景；
• bg-yellow-300 : 黄色背景；
• bg-blue-300 : 蓝色背景；
• inline : 相当于 display: inline;
• ml-2 : 相当于 margin-left;

效果如上

可能会遇到的问题

如果在安装tailwindcss之后发现原始的标签(比如h1、h2、button)样式不显示了可以在tailwindcss.config.js文件中插入属性 corePlugins: {preflight: false // 关闭默认样式}