24 Vue3之集成TailwindCSS

Tailwind CSS

Tailwind CSS是一个由js编写的CSS 框架 他是基于postCss 去解析的

官网地址Tailwind CSS 中文文档 - Tailwind CSS - 只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

对于PostCSS的插件使用,我们再使用的过程中一般都需要如下步骤:

  • PostCSS 配置文件 postcss.config.js,新增 tailwindcss 插件。
  • TaiWindCss插件需要一份配置文件,比如:tailwind.config.js。

PostCSS 中文网https://www.postcss.com.cn/

postCss 功能介绍

PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具

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

postCss 处理 tailWind Css 大致流程

将CSS解析成抽象语法树(AST树)

读取插件配置,根据配置文件,生成新的抽象语法树

将AST树"传递"给一系列数据转换操作处理(变量数据循环生成,切套类名循环等)

清除一系列操作留下的数据痕迹

将处理完毕的AST树重新转换成字符串

初始化项目

npm init vue@latest

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

npx tailwindcss init -p //生成配置文件

修改配置文件 tailwind.config.js

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;

main.ts引入

<div class="space-y-4">
  <div class="w-96 bg-white shadow rounded">
      w-96
  </div>
  <div class="w-80 bg-white shadow rounded">
      w-80
  </div>
  <div class="w-72 bg-white shadow rounded">
      w-72
  </div>
  <div class="w-64 bg-white shadow rounded">
      w-64
  </div>
  <div class="w-60 bg-white shadow rounded">
      w-60
  </div>
  <div class="w-56 bg-white shadow rounded">
      w-56
  </div>
  <div class="w-52 bg-white shadow rounded">
      w-52
  </div>
  <div class="w-48 bg-white shadow rounded">
      w-48
  </div>
</div>

npm run dev就行了。

相关推荐
Mebius19166 天前
开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具
前端·react.js·typescript·开源·github·tailwindcss·nextjs
Casta-mere22 天前
【Next.js 项目实战系列】03-查看 Issue
typescript·react·tailwindcss·next.js·issue tracker
兰亭古墨2 个月前
Tailwind CSS @apply Unknown at rule @apply scss(unknownAtRules) 解决方案
前端·tailwindcss
applebomb3 个月前
【vue3+Typescript】手撸了一个轻量uniapp导航条
typescript·uni-app·vue·tailwindcss
程序员白彬3 个月前
怎么在 tailwindcss 项目中自定义一些可复用的样式
css·tailwindcss
Amodoro3 个月前
项目中万能使用tailwindcss,无版本冲突、报错
前端·tailwindcss·css库
valsedefleurs4 个月前
使用Tailwindcss之后,vxe-table表头排序箭头高亮消失的问题解决
前端·javascript·vue·tailwindcss
valsedefleurs4 个月前
Tailwindcss 扩展默认配置来自定义颜色
前端·javascript·vue·tailwindcss
白雾茫茫丶6 个月前
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
react·next·tailwindcss·nextui