光速入门 Tailwind CSS

在这里插入图片描述

文章目录

  • 入门
    • 安装
    • IDE 设置
    • 使用预编译器
    • 生产环境优化
  • 基础概念
    • 分层
    • 指令
      • @tailwind
      • @layer
      • @apply
      • @config
    • 函数
      • theme()
      • screen()
  • 基础案例
    • 怎么设置属性任意值？
    • hover 父元素时，怎么选中子元素添加样式？
    • 添加 animation 动画
  • 配置主题

Tailwind CSS 中文网
Tailwind Play

入门

安装

三种使用方式：

  1. cli
  2. 结合 postcss
  3. cdn

cli 方式就和命令行使用 scss、tsc 这些工具一样，需要手动执行监听文件改变的命令，实时编译。这种方式只适合做 demo 时的简单使用。

想要正儿八经的使用，比如和构建工具结合，就要搭配 postcss 一起使用。

pnpm install -D tailwindcss postcss autoprefixer

pnpm tailwindcss init --postcss

tailwindcss 初始化后会生成 postcss 和 tailwindcss 的配置文件。
然后在 tailwindcss.config.js 的 content 选项中配置需要编译的模版文件路径。

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

将指令添加到主 css 文件：

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

此时会出现 css 无法识别 tailwind 指令的问题。

解决办法：
解决 vscode Unknown at rule @xxx 的警告

IDE 设置

vscode 安装 tailwind 插件可以获得提示和高亮。并且官方提供了一个 Prettier 插件，它会自动按照官方推荐的类顺序对你写的类进行排序。

pnpm add -D prettier prettier-plugin-tailwindcss

{
    "plugins": [
        "prettier-plugin-tailwindcss"
    ]
}

注意：项目中声明了 prettier 的配置文件的，那 vscode settings.json 中的 prettier 配置就会被覆盖。
所以项目中的配置文件除了声明使用 prettier-plugin-tailwindcss 插件外，还要补充其他额外的配置。除非你起初使用的 prettier 配置就是 prettier 默认的配置。

另外配置文件可能出现 json schema 验证失败的问题。
解决"无法从“https://json.schemastore.org/xxx”加载架构"的问题

使用预编译器

由于 Tailwind 是一个 PostCSS 插件，没有什么能阻止你将它与 Sass、Less、Stylus 或其他预处理器一起使用。

虽然可以，但非常不建议和预编译器一起使用。

当需要使用某些预编译器的功能时，你应该高度考虑依赖其他 PostCSS 插件来添加你使用的预处理器功能，而不是使用单独的 预处理器。

  • postcss 插件列表：postcss/docs/plugins.md at main · postcss/postcss

预编译器最常见的几个功能：

  1. css 拆分成多个文件导入
  2. 选择器嵌套
  3. 变量
  4. 浏览器前缀

这 4 个功能对应的 postcss 解决方案：

  1. postcss 插件：postcss-import
    1. 安装使用。
  2. 官方基于 postcss-nested（默认） 或 postcss-nesting 封装的插件：tailwindcss/nesting
    1. 已经内置，可直接使用，并且可配置应用哪个postcss-nesting 插件。不过需要安装使用。
    2. 如果使用了 postcss 预设： postcss-preset-env。则要手动关掉预设中的嵌套功能，让官方的嵌套插件生效。
  3. 直接使用 css 变量
  4. postcss 插件：autoprefixer
    1. 安装使用，并且添加在插件末尾使用。其实 init 时，已经添加在末尾。

postcss-import 它严格遵守 CSS 规范， @import 语句必须在第一行使用。

这个问题容易在两个地方忽视：一是和常规 CSS 写在一起时，二是和 tailwind 主 css 文件写在一起时。
无论是 .box {} 这样的常规 CSS 还是 @tailwind 指令，@import 都必须写在第一行。

为了解决这个容易忽视的问题，最好的办法就是拆成单独文件写。

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

使用 postcss-nesting 作为嵌套实现，并关闭 postcss 预设插件中的嵌套功能：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  }
}

总结 postcss 配置：

pnpm add -D postcss-import

pnpm add -D autoprefixer

export default {
    plugins: {
        "postcss-import": {},
        "tailwindcss/nesting": {},
        tailwindcss: {},
        autoprefixer: {}
    }
};

硬要和预编译器一起使用，具体参考文档。

生产环境优化

对于尽可能小的生产构建，我们建议使用 cssnano 等工具缩小 CSS，并使用 Brotli 压缩 CSS。

如果你使用的是 Tailwind CLI，则可以通过添加 --minify 标志来缩小 CSS：

npx tailwindcss -o build.css --minify

如果你已将 Tailwind 安装为 PostCSS 插件，请将 cssnano 添加到插件列表的末尾：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

如果你使用的是框架，请查看文档，因为这通常会在生产中自动为你处理，你甚至不需要对其进行配置。

基础概念

分层

首先我们要明白，tailwind 能通过类的方式来写样式，是因为它已经提供了这些写好了 css 的类。并且 tailwind 把这些类分成了三层。

Tailwind 将其生成的样式组织成三个不同的 “layers” — 这是 ITCSS 推广的概念。

  • base 层用于重置规则或应用于纯 HTML 元素的默认样式。
  • components 层用于你希望能够使用工具覆盖的基于类的样式。
  • utilities 层用于小型、单一用途的类，这些类应始终优先于任何其他样式。

ITCSS（Inverted Triangle CSS）是一种CSS架构方法，它通过将CSS代码组织成一系列层次来提高CSS的可维护性和可扩展性。这些层次从宽泛的、全局的设置到非常具体、局部的样式，形成一个倒三角形的结构。

每一层都有其明确的职责，如下：

  1. Settings：包含设计中的变量，如颜色、字体和断点。
  2. Tools：包含辅助函数、混合宏和实用工具类。
  3. Generic：包含重置、标准化样式和排版规则。
  4. Base：包含元素的样式，如按钮、表单和网格系统。
  5. Objects：包含设计中的布局模式，如媒体对象和列表。
  6. Components：包含更复杂的功能模块，如按钮组、轮播和导航。
  7. Utilities：包含最具体的设计调整，如间距、文本样式和可见性。

ITCSS的目标是通过限制CSS的特异性、减少依赖性、避免重叠和冲突，以及提供清晰的代码组织结构，来创建一个易于管理和扩展的CSS代码库。这种方法特别适合大型项目和团队协作，因为它有助于确保一致性和减少不必要的复杂性。

指令

tailwind 总共就提供了 4 个指令。

@tailwind

@tailwind 指令就像是导入语句 import，将 Tailwind 提供的 base、components、utilities 和 variants 样式插入到你的 CSS 中。

@layer

自定义样式的时候，我们可能会添加一些自定义类。@layer 指令就是用来告诉 tailwind 这些自定义的类应该属于三层中的哪一层，tailwind 你要按这一层的规矩管理它。

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

@apply

@apply 指令如上所示，就是可以在自定义的 css 中使用 tailwind 提供的类。而且它不仅仅局限于 tailwind 提供的类，自定义的类也可以提取其中的样式进行复用。

  • 不过要注意：从类中提取的样式会删掉 !important。
@layer base {
  h1 {
    @apply text-2xl;
  }
}

.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

还有一点，就是 @apply 指令在 Vue 组件中无法提取应用其他 css 文件中自定义的类。比如在主 css 文件 main.css 中自定义了一个 card 类，在组件中无法 @apply 应用 card 类。

这是因为每个 Vue 组件中

解决办法是在 tailwind 插件中添加自定义的 css 类，这样就能全局共享了。

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
    })
  ]
}

但老实说，最好的解决办法就是根本不做这种奇怪的事情。因为你完全可以在 html 模版上写类，压根不需要

@config

@config 指令指定 Tailwind 在编译该 CSS 文件时应使用哪个配置文件。这对于需要为不同的 CSS 入口点使用不同的配置文件的项目很有用。

你提供给 @config 指令的路径是相对于该 CSS 文件的，并且将优先于 PostCSS 配置或 Tailwind CLI 中定义的路径。

@config "./tailwind.admin.config.js";

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

@config "./tailwind.site.config.js";

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

函数

Tailwind 添加了一些自定义函数，用来在自定义样式时，在 css 中获取 tailwind 提供的样式中的一些值。比如使用 tailwind 提供的间距，颜色等。

theme()

theme() 读取 tailwind 类中的样式。使用.表示法读取值。

  • 如果类中就带了点，避免歧义使用[]获取
.content-area {
  height: calc(100vh - theme(spacing.12));
}

.content-area {
  height: calc(100vh - theme(spacing[2.5]));
}
  • 访问嵌套颜色值时不要使用破折号语法，要把破折号换成点
/* 错误 */
.btn-blue {
  background-color: theme(colors.blue-500);
}

/* 正确 */
.btn-blue {
  background-color: theme(colors.blue.500);
}
  • 要调整使用 theme 检索到的颜色的透明度，请使用斜杠后跟你要使用的透明度值：
.btn-blue {
  background-color: theme(colors.blue.500 / 75%);
}

screen()

screen() 复用 tailwind 提供的断点，直接在媒体查询中使用。当想要媒体查询时，不用自己去查看 tailwind 编译的断点结构，然后复制使用。

/* 自己手写 */
@media (min-width: 640px) {
  /* ... */
}

/* 直接用 tailwind 的断点修饰符 */
@media screen(sm) {
  /* ... */
}

基础案例

tailwind 默认提供了样式重置。

怎么设置属性任意值？

所有的任意值，也可以说自定义的属性值，都是用[]包裹标记。
比如想要设置背景颜色为 #123456，bg-[#123456]。并且能自动区分，如text-[2em]是文字大小，text-[#123456]是文字颜色。

若是 tailwind 没有提供的属性，则全用[]包裹。如文字阴影：[text-shadow:0_3rem_#fff]

在[]中，多个属性值之间的空格用_代替。[]中其实就相当于直接写 css 属性值，所以也支持 css 的函数。如 var、calc。
text-[var(--color)]
hover:shadow-[0_0_25px_var(--color),0_0_100px_var(--color)]

hover 父元素时，怎么选中子元素添加样式？

group 标记父元素，然后 group:hover: 给子元素设置样式。如group:hover:text-red。
其他的，如兄弟选择器等，看文档。

添加 animation 动画

tailwind 默认提供了 4 个动画，分别是：

  1. spin 旋转
  2. ping 放大并透明，爆开的效果
  3. pulse 脉动，呼吸灯一样的效果
  4. bounce 弹跳
<div class="animation-pulse">ikun</div>

显然这些动画是不够的，要自定义 animation 动画，则要去配置文件中配置 keyframes。并且可以在 animation 选项中像使用 css 一样声明使用 keyframes 动画。这样就可以以 animation-xxx 原子类的方式在 html 中使用动画了。

  • 注意所有的配置都是 js 对象写法。
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    }
  }
}

<div class="animation-wiggle">ikun</div>

如果不想在 animation 选项中配置出对应的动画工具类，也可以通过animation-[]在 html 中像 css 那样使用：

<span 
  style="--i: 123" 
  class="
  inline-block 
  animate-[floatDown_0.3s_calc(var(--i)*50ms)_ease] 
  group-hover:animate-[floatUp_0.3s_ease_calc(var(--i)*50ms)_forwards]"
  >
  ikun
</span>

注意：inline 元素如 span 无法应用动画，要改成 block 或者 inline-block。

配置主题

tailwind 允许在配置文件中配置主题。其实主要是两块内容：

  1. 修改或覆盖 tailwind 提供的主题。比如修改 tailwind 默认提供的断点分界线
  2. 扩展工具类，extend。

如果你想保留主题选项的默认值，但还想添加新值，请在配置文件中的 theme.extend 键下添加扩展。该键下的值将与现有的 theme 值合并，并自动成为可供你使用的新类。

例如，这里我们扩展 fontFamily 属性以添加 font-display 类，该类可以更改元素上使用的字体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // Adds a new `font-display` class
      }
    }
  }
}

将其添加到主题后，你可以像任何其他字体系列工具一样使用它：

<h1 class="font-display">
  This uses the Oswald font
</h1>

扩展屏幕断点：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px', // Adds a new `3xl:` screen variant
      }
    }
  }
}

<blockquote class="text-base md:text-md 3xl:text-lg">
  Oh I gotta get on that internet, I'm late on everything!
</blockquote>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/772025.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

性能测试-JMeter学习

性能测试-JMeter学习

1、给不同的访问口分配访问占比&#xff1b;例&#xff1a;登录30%&#xff0c;首页&#xff1a;20%&#xff0c;新增&#xff1a;50% 不同业务放到不同线程组里&#xff0c;实现不同业务的分配 使用吞吐量控制器&#xff0c;设置不同的占比 使用if控制器&#xff0c;设置不同…
阅读更多...
HX4004A-MFC 低噪声、稳压电荷泵DC/DC转换器芯片IC

HX4004A-MFC 低噪声、稳压电荷泵DC/DC转换器芯片IC

一般描述 该HX4004A是一个低噪声开关电容电压倍。它产生一个调节输出电压从2.7V到4.5V的输入。低的外部零件数量(VIN和VOUT处一个飞行电容和两个小型旁路电容)使HX4004A非常适合小型电池供电应用。 该HX4004A具有热关断能力&#xff0c;可以生存从VOUT到GND的连续…
阅读更多...
【pytorch13】激活函数及梯度

【pytorch13】激活函数及梯度

什么是激活函数 计算机科学家借鉴生物的神经元机制发明了计算机上的模型&#xff0c;这个模型与生物的神经元非常类似 激活的意思就是z变量要大于0&#xff0c;这一个节点才会激活&#xff0c;否则就会处于睡眠状态不会输出电平值 该激活函数在z0处不可导&#xff0c;因此不能…
阅读更多...
地级市空气质量指数AQI、环境污染PM2.5、SO2

地级市空气质量指数AQI、环境污染PM2.5、SO2

2015-2021年地级市月度空气质量数据&#xff08;AQI、SO2、NO2、PM2.5、PM10、O3、CO&#xff09; 目录 探究环境污染对经济增长的影响 一、引言 二、数据来源与描述性统计 三、实证模型 &#xff08;一&#xff09;模型设定 &#xff08;二&#xff09;变量说明 四、程…
阅读更多...
混元大模型加持，微信输入法开启AI问答新体验

混元大模型加持，微信输入法开启AI问答新体验

在人工智能技术飞速发展的今天&#xff0c;微信作为全球最大的社交平台之一&#xff0c;一直在不断地探索和创新&#xff0c;以提供更智能、更便捷的用户体验。 最近&#xff0c;微信官方宣布了一个令人兴奋的消息&#xff1a;微信输入法正式上线了“一键AI问答”功能&#xf…
阅读更多...
【Python机器学习】算法链与管道——通用的管道接口

【Python机器学习】算法链与管道——通用的管道接口

Pipeline类补单可以用于预处理和分类&#xff0c;实际上还可以将任意数量的估计器连接在一起。例如&#xff0c;我们可以构建一个包含特征提取、特征选择、缩放和分类的管道&#xff0c;总共有4个步骤。同样的&#xff0c;最后一步可以用聚类或回归代替。 对于管道中估计器的唯…
阅读更多...
【机器学习】Datawhale-AI夏令营分子性质AI预测挑战赛

【机器学习】Datawhale-AI夏令营分子性质AI预测挑战赛

参赛链接&#xff1a;零基础入门 Ai 数据挖掘竞赛-速通 Baseline - 飞桨AI Studio星河社区 一、赛事背景 在当今科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的深度和广度渗透到科研领域&#xff0c;特别是在化学及药物研发中展现出了巨…
阅读更多...
警翼警用记录仪视频格式化后恢复方法

警翼警用记录仪视频格式化后恢复方法

警翼是国内较大的一家警用记录仪厂商&#xff0c;此品牌我们恢复过很多&#xff0c;此次遇到的是一个典型的误格式化的情况&#xff0c;我们来看看误格式化后如何恢复。 故障存储: 32G卡/fat32 故障现象: 客户提供的信息是在交接设备后没有及时备份而做出了初始化设备的操…
阅读更多...
fluwx插件实现微信支付

fluwx插件实现微信支付

Flutter开发使用fluwx插件实现微信支付&#xff0c;代码量不多&#xff0c;复杂的是安卓和iOS的各种配置。 在 pubspec.yaml 文件中添加fluwx依赖 fluwx: ^4.5.5 使用方法 通过fluwx注册微信Api await Fluwx().registerApi(appId: wxea7a1c53d9e5849d, universalLink: htt…
阅读更多...
机器人控制系列教程之Delta机器人动力学分析

机器人控制系列教程之Delta机器人动力学分析

动力学简介 机器人动力学分析是已知各运动构件的尺寸参数和惯性参数的情况下，求解末端运动状态与主驱动力矩之间的函数关系。 意义：对并联机器人动力学分析的意义体现在： 为伺服电机的选型提供理论依据；获得动力学参数为目标函数的最优问题做性能评价指标；为高精度控制提…
阅读更多...
内容为王：揭秘顶尖品牌的内容营销制胜法宝

内容为王：揭秘顶尖品牌的内容营销制胜法宝

内容营销是当今互联网市场推广领域的热门话题&#xff0c;因为它可以帮助企业更好地与受众沟通、建立品牌口碑&#xff0c;增加销售量。 根据咱们何策网的资源库里的SocialBeta2024年最新《2024 内容营销 10 大趋势》的报告来看&#xff0c;品牌在未来内容营销中最应该注重的是…
阅读更多...
2024亚太杯中文赛数学建模B题【洪水灾害的数据分析与预测】思路详解

2024亚太杯中文赛数学建模B题【洪水灾害的数据分析与预测】思路详解

2024 年第十四届 APMCM 亚太地区大学生数学建模竞赛 B题 洪水灾害的数据分析与预测 附件 train.csv 中提供了超过 100 万的洪水数据&#xff0c;其中包含洪水事件的 id、季风强度、地形排水、河流管理、森林砍伐、城市化、气候变化、大坝质量、淤积、农业实践、侵蚀、无效防灾、…
阅读更多...
Unity 之基于URP使用UniStorm Weather System天气系统

Unity 之基于URP使用UniStorm Weather System天气系统

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity 之基于URP使用UniStorm Weather System天气系统 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、…
阅读更多...
Linux和mysql中的基础知识

Linux和mysql中的基础知识

cpu读取的指令大部分在内存中&#xff08;不考虑缓存&#xff09; 任何程序在运行之前都的加入到内存。 eip->pc指针&#xff0c;指明当前指令在什么位置。 代码大概率是从上往下执行的&#xff0c;基于这样的基本理论。既可以将一部分指令加载到CPU对应的缓存中&#xf…
阅读更多...
智能猫砂盆到底哪家好用？自费实测聚宠、糯雪、CEWEY真实反馈！

智能猫砂盆到底哪家好用？自费实测聚宠、糯雪、CEWEY真实反馈！

快到夏天了&#xff0c;是不是还有人因为没挑选到喜欢的智能猫砂盆而苦恼着&#xff1f;太便宜怕不好用&#xff0c;太贵怕质量比不上价格。来来去去拖到现在还没决定&#xff0c;我作为养了四年猫的资深铲屎官&#xff0c;今天就来给大家传授经验&#xff0c;关于我是怎么从好…
阅读更多...
从源码到应用：直播电商系统与短视频带货APP开发指南

从源码到应用：直播电商系统与短视频带货APP开发指南

本篇文章&#xff0c;笔者将从源码到应用&#xff0c;详细探讨如何开发一个直播电商系统和短视频带货APP。 一、系统架构设计 在开始开发之前&#xff0c;首先需要对系统进行整体架构设计。一个完整的直播电商系统和短视频带货APP主要包括以下几个模块&#xff1a; 1.用户管理…
阅读更多...
Android12 MultiMedia框架之MediaExtractorService

Android12 MultiMedia框架之MediaExtractorService

上节学到setDataSource()时会创建各种Source&#xff0c;source用来读取音视频源文件&#xff0c;读取到之后需要demux出音、视频、字幕数据流&#xff0c;然后再送去解码。那么负责进行demux功能的media extractor模块是在什么时候阶段创建的&#xff1f;这里暂时不考虑APP创建…
阅读更多...
UE5.4新功能 - Texture Graph上手简介

UE5.4新功能 - Texture Graph上手简介

TextureGraph是UE5.4还在实验(Experimental)阶段的新功能&#xff0c;该功能旨在材质生成方面达到类似Subtance Designer的效果&#xff0c;从而程序化的生成一些纹理。 本文就来简要学习一下。 1.使用UE5.4或以上版本&#xff0c;激活TextureGraph插件 2.内容视图中右键找到…
阅读更多...
day11_homework_need2submit

day11_homework_need2submit

Homework 编写—个将ts或mp4中视频文件解码到yuv的程序 yuv数据可以使用如下命令播放: ffplay -i output yuv-pix_fmt yuv420p-s 1024x436 要求: ffmpeg解析到avpacket并打印出pts和dts字段完成解码到avframe并打印任意字段完成yuv数据保存 // teminal orders on bash cd ex…
阅读更多...
6 矩阵相关案例

6 矩阵相关案例

矩阵计算在CUDA中的应用是并行计算领域的典型场景 &#xff1b; 矩阵算法题通常涉及线性代数的基础知识&#xff0c;以及对数据结构和算法的深入理解。解决这类问题时&#xff0c;掌握一些核心思想和技巧会非常有帮助。以下是一些常见的矩阵算法题解题思想&#xff1a; 动态规划…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站