相关文章推荐
寂寞的茶叶  ·  AppleScript-方法 - 简书·  1 年前    · 

会在项目中创建tailwind.config.js文件

在tailwind.config.js中添加代码:

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

引入Tailwind样式到项目中

在assets中创建一个tailwind.css样式文件,引入:

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

使用命令:

npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch

在main.js中引入:

import './assets/tailwind.css'
import './assets/output.css'

在package.json中加入:

"tail": "tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch"

重启项目即可。

具体用法可以参考官网:中文文档 - Tailwind CSS 中文文档

PostCSS 插件Vite 使用 PostCSS 插件处理 CSS 文件。在构建过程中,PostCSS 解析你的 CSS 文件并将其转换为 Tailwind CSS 样式。JIT 模式Tailwind CSS 的 JIT 编译模式可以在开发过程中动态生成所需的样式类。这意味着只会生成你实际使用到的 CSS 类,从而减小最终的 CSS 文件大小并提高性能。并且Tailwind CSS 提供了方便的响应式设计工具。你可以通过添加断点前缀来指定不同屏幕尺寸下的样式。配置文件。 Tailwind CSS允许在tailwind.config.js配置文件中自定义样式,如颜色、字体大小、边框宽度等。然后,这些自定义样式可以在HTML中通过类名引用,如text-custom-size。 上一篇文章我们说过了如何搭建项目以及引入TailWindCSS,这篇文章我们说一下如何使用它,刚看到的时候我对这些缩写感觉很迷茫呀,官网我也没找到如何能知道具体对应的都是撒意思,后面找到一片天比较详细的介绍的文章,认真研究了一下,文章我会放在本文的最末尾。好啦话不多说,开始吧!1.screens(也可以自定义媒体查询屏幕的宽度) 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰,green: 3.纵横比--aspect 4.容器--container 6.列--co. Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架,提供了基础的工具类 utility classes(如:内边距 padding、字体 text 和 font、动画 transition 等预设类),能直接在脚本标记语言中组合起来,构建出您想要的设计。 Tailwind是一款CSS框架,它的主要特点是提供了一系列的CSS类,可以快速地构建出各种样式。Tailwind的发展历史可以追溯到2017年,由Adam Wathan、Steve Schoger和Jonathan Reinink共同创建。Tailwind的设计理念是提供一系列的原子类,每个类都只包含一个具体的样式,通过组合这些类来构建出复杂的样式。这种设计理念可以让开发者更加灵活地控制样式,同时也可以减少样式冗余,提高代码的可维护性。提供了一系列的原子类,可以快速地构建出各种样式。 更好的阅读体验请移步至:zhengxiaoping.xyz/css/Tailwin…[1]安装以下方法是Vite + Vue模式下的安装方法,其他脚手架与框架的使用同理。创建项目pnpmcreateviteapp--templatevue #yarncreateviteapp--templatevue #npmcreateviteapp--templatevue
 
推荐文章