指令
指令以@开头
,符合CSS语法规则,目的是为了为Tailwind CSS项目提供特殊功能
@tailwind
使用@tailwind指令为项目提供Tailwind的基础样式、组件样式、实用程序样式和功能类前缀
/*
@tailwind <bucket> --- 每一个都是一个样式桶
样式桶中的样式可以是tailwind默认提供的,也可以是通过插件注入的
*/
/* 基础样式 --- 样式重置和默认样式 */
@tailwind base;
/* 组件样式 --- 按钮, 输入框, 表单, 表格的功能类 */
@tailwind components;
/* 单一属性类 --- 宽度、高度、颜色、边距、填充等 */
@tailwind utilities;
/*
功能类前缀
+ 省略 --- 按需引入功能类前缀,并将其插入到css最后
+ 显示指定 --- 全量引入功能类前缀,并将其插入到css最后
*/
@tailwind variants;
@layer
@layer
指令可以将自定义样式添加到对应的样式桶中, 有效值为base、components或utilities
使用@layer添加的自定义功能类可以使用任何的功能类修饰符前缀,并且可以实现按需引用
使用 @layer
添加的样式会被添加到对应的样式桶的末尾,以确保自定义样式能够覆盖之前的样式
@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 的语法规则,可以让你把已经存在的一些 CSS 样式直接应用到你自己写的 CSS 样式中
使用@apply可以很好的覆盖一些不是基于Tailwind编写的第三方库的样式
默认情况下,使用@apply
添加的功能类不具有!important
如果需要具备!important
,只需要在添加的样式的末尾添加!important
即可
/* Input */
.btn {
@apply font-bold py-2 px-4 rounded !important;
}
/* Output */
.btn {
font-weight: 700 !important;
padding-top: .5rem !important;
padding-bottom: .5rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: .25rem !important;
}
像 Vue 和 Svelte 这样的框架在底层会独立处理每个 <style>
块,并针对每个块单独运行 PostCSS 插件链
所以会导致通过全局样式桶注入的自定义功能类,无法在组件的<style>
块中被解析
为此Tailwind提供了插件系统,以解决这个问题
// tailwind.config.ts
const plugin = require('tailwindcss/plugin')
module.exports = {
// 这种方法可以让任何由 Tailwind 处理的文件都可以使用这个配置文件中定义的样式
// 但最好不要滥用 @apply 功能来做这样的事情,以获取更好的开发体验
plugins: [
plugin(function ({ addComponents, theme }) {
addComponents({
'.card': {
backgroundColor: theme('colors.white'),
borderRadius: theme('borderRadius.lg'),
padding: theme('spacing.6'),
boxShadow: theme('boxShadow.xl'),
}
})
})
]
}
@config
使用 @config 指令来指定 Tailwind 在编译该 CSS 文件时应该使用哪个配置文件
/*
@import有语法限制,必须位于css文件的最前边(注释不算)
所以对应的顺序为
@import xxx;
@config xxx;
@tailwind xxx;
*/
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* @config对应的路径是相对于当前css文件路径而言的 */
@config "./tailwind.prod.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
函数
Tailwind 添加了一些会在构建阶段执行的自定义函数,这些函数会在构建的时候被执行,以确保在运行时对应的函数会被静态值替换
theme()
使用 theme() 函数使用点符号访问 Tailwind 配置值
.content-area {
/*
spacing-12 ---> spacing.12
spacing-2.5 ---> spacing[2.5]
colors-blue-500 ---> colors.blue.500
bg-sky-500/75 ---> bg.sky.500 / 75% ==> 75%表示透明度为0.75
*/
height: calc(100vh - theme(spacing.12));
}
screen()
使用 Tailwind 的 screen 函数,可以使用 Tailwind 预设的响应式断点来编写媒体查询,而不必手动输入具体的断点值,从而使 CSS 代码更加简洁易读,同时也方便维护和更新
/* input */
@media screen(sm) {
/* ... */
}
/* output */
@media (min-width: 640px) {
/* ... */
}
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。
在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。
本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。
除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。
在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!