vue3集成Tailwind Css

落魄实习生

已于 2023-11-28 13:54:55 修改

阅读量728

点赞数 2

分类专栏： vue 前端文章标签： css 前端

于 2023-11-28 11:54:04 首次发布

原文链接：https://blog.csdn.net/Lyrelion/article/details/128227554

版权

39 篇文章 1 订阅

订阅专栏

36 篇文章 3 订阅

订阅专栏

一、Tailwind Css介绍

Tailwind Css 是由 JavaScript 编写的 Css 框架，基于PostCss 解析

Tailwind CSS 中文文档：https://www.tailwindcss.cn/

优点分析：

PostCSS 利用 JavaScript 的强大编程能力对 CSS 代码进行转换。数以百计的 PostCSS 插件可以用来为 CSS 属性添加特定于浏览器厂商的前缀、支持未来 CSS 语法、模块化、代码检测等。

PostCss 功能介绍：

增强代码的可读性（利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。）
将未来的 CSS 特性带到今天！（PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。）
终结全局 CSS（CSS 模块能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。）
避免 CSS 代码中的错误【类似 eslint】（通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。）

PostCss 处理 Tailwind Css 基本流程，原理类似于 —— 虚拟 DOM 解析

yarn create vite

代码如下（示例）：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

//tailwind依赖 Headless UI 需要下载
npm install @headlessui/vue @heroicons/vue

npx tailwindcss init -p

2.6版本

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.0版本

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建 index.css

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

本文取自：https://blog.csdn.net/Lyrelion/article/details/128227554

关注