Tailwind CSS 中文教程
Tailwind CSS 中文教程
  1. Tailwind CSS 入门
    1. Tailwind CSS 安装
    2. Tailwind CSS 发布说明
    3. Tailwind CSS 升级指南
    4. Tailwind CSS 编辑器支持
    5. Tailwind CSS 使用预处理器
    6. Tailwind CSS 生产优化
    7. Tailwind CSS 浏览器支持
  2. Tailwind CSS 核心概念
    1. Tailwind CSS 功能类优先
    2. Tailwind CSS 响应式设计
    3. Tailwind CSS 悬停、焦点和其他状态
    4. Tailwind CSS 深色模式
    5. Tailwind CSS 添加基础样式
    6. Tailwind CSS 提取组件
    7. Tailwind CSS 添加新的功能类
    8. Tailwind CSS 函数与指令
  3. Tailwind CSS 定制
    1. Tailwind CSS 配置
    2. Tailwind CSS Just-in-Time Mode
    3. Tailwind CSS 主题
    4. Tailwind CSS 断点
    5. Tailwind CSS 颜色
    6. Tailwind CSS 间距
    7. Tailwind CSS 变体
    8. Tailwind CSS 插件
    9. Tailwind CSS 预设
  4. Tailwind CSS 基础样式
    1. Tailwind CSS Preflight
  5. Tailwind CSS 布局
    1. Tailwind CSS 容器
    2. Tailwind CSS Box Decoration Break
    3. Tailwind CSS Box Sizing
    4. Tailwind CSS Display
    5. Tailwind CSS 浮动
    6. Tailwind CSS 清除浮动
    7. Tailwind CSS Isolation
    8. Tailwind CSS Object Fit
    9. Tailwind CSS Object Position
    10. Tailwind CSS Overflow
    11. Tailwind CSS Overscroll Behavior
    12. Tailwind CSS 定位
    13. Tailwind CSS Top / Right / Bottom / Left
    14. Tailwind CSS 可见性
    15. Tailwind CSS Z-Index
  6. Tailwind CSS 弹性盒子和网格
    1. Tailwind CSS Flex Direction
    2. Tailwind CSS Flex Wrap
    3. Tailwind CSS Flex
    4. Tailwind CSS Flex Grow
    5. Tailwind CSS Flex Shrink
    6. Tailwind CSS Order
    7. Tailwind CSS Grid Template Columns
    8. Tailwind CSS Grid Column Start / End
    9. Tailwind CSS Grid Template Rows
    10. Tailwind CSS Grid Row Start / End
    11. Tailwind CSS Grid Auto Flow
    12. Tailwind CSS Grid Auto Columns
    13. Tailwind CSS Grid Auto Rows
    14. Tailwind CSS Gap
    15. Tailwind CSS Justify Content
    16. Tailwind CSS Justify Items
    17. Tailwind CSS Justify Self
    18. Tailwind CSS Align Content
    19. Tailwind CSS Align Items
    20. Tailwind CSS Align Self
    21. Tailwind CSS Place Content
    22. Tailwind CSS Place Items
    23. Tailwind CSS Place Self
  7. Tailwind CSS 间距
    1. Tailwind CSS 内边距
    2. Tailwind CSS 外边距
    3. Tailwind CSS 间距
  8. Tailwind CSS 尺寸
    1. Tailwind CSS 宽度
    2. Tailwind CSS 最小宽度
    3. Tailwind CSS 最大宽度
    4. Tailwind CSS 高度
    5. Tailwind CSS 最小高度
    6. Tailwind CSS 最大高度
  9. Tailwind CSS 排版
    1. Tailwind CSS 字体序列
    2. Tailwind CSS 字体大小
    3. Tailwind CSS 字体平滑度
    4. Tailwind CSS 字体样式
    5. Tailwind CSS 字体粗细
    6. Tailwind CSS Font Variant Numeric
    7. Tailwind CSS 字母间距
    8. Tailwind CSS 行高
    9. Tailwind CSS 列表项标记类型
    10. Tailwind CSS 列表项标记位置
    11. Tailwind CSS 占位文本颜色
    12. Tailwind CSS 占位文本不透明度
    13. Tailwind CSS 文本对齐
    14. Tailwind CSS 文本颜色
    15. Tailwind CSS 文本颜色不透明度
    16. Tailwind CSS 文本装饰
    17. Tailwind CSS 文本转换
    18. Tailwind CSS 文本溢出
    19. Tailwind CSS 垂直对齐
    20. Tailwind CSS 空格
    21. Tailwind CSS 文本换行
  10. Tailwind CSS 背景
    1. Tailwind CSS 背景图像固定
    2. Tailwind CSS 背景图像裁剪
    3. Tailwind CSS 背景颜色
    4. Tailwind CSS 背景颜色不透明度
    5. Tailwind CSS Background Origin
    6. Tailwind CSS 背景图像位置
    7. Tailwind CSS 背景图像重复
    8. Tailwind CSS 背景图像大小
    9. Tailwind CSS 背景图像
    10. Tailwind CSS 渐变色停止
  11. Tailwind CSS 边框
    1. Tailwind CSS 边框圆角
    2. Tailwind CSS 边框厚度
    3. Tailwind CSS 边框颜色
    4. Tailwind CSS 边框不透明度
    5. Tailwind CSS 边框样式
    6. Tailwind CSS 分割线厚度
    7. Tailwind CSS 分割线颜色
    8. Tailwind CSS 分割线不透明度
    9. Tailwind CSS 分割线样式
    10. Tailwind CSS 轮廓环厚度
    11. Tailwind CSS 轮廓环颜色
    12. Tailwind CSS 轮廓环不透明度
    13. Tailwind CSS 轮廓环偏移厚度
    14. Tailwind CSS 轮廓环偏移颜色
  12. Tailwind CSS 效果
    1. Tailwind CSS 盒阴影
    2. Tailwind CSS 不透明度
    3. Tailwind CSS Mix Blend Mode
    4. Tailwind CSS Background Blend Mode
  13. Tailwind CSS 过滤器
    1. Tailwind CSS Filter
    2. Tailwind CSS Blur
    3. Tailwind CSS Brightness
    4. Tailwind CSS Contrast
    5. Tailwind CSS Drop Shadow
    6. Tailwind CSS Grayscale
    7. Tailwind CSS Hue Rotate
    8. Tailwind CSS Invert
    9. Tailwind CSS Saturate
    10. Tailwind CSS Sepia
    11. Tailwind CSS Backdrop Filter
    12. Tailwind CSS Backdrop Blur
    13. Tailwind CSS Backdrop Brightness
    14. Tailwind CSS Backdrop Contrast
    15. Tailwind CSS Backdrop Grayscale
    16. Tailwind CSS Backdrop Hue Rotate
    17. Tailwind CSS Backdrop Invert
    18. Tailwind CSS Backdrop Opacity
    19. Tailwind CSS Backdrop Saturate
    20. Tailwind CSS Backdrop Sepia
  14. Tailwind CSS 表格
    1. Tailwind CSS 表格边框
    2. Tailwind CSS 表格布局
  15. Tailwind CSS 过渡和动画
    1. Tailwind CSS 过渡属性
    2. Tailwind CSS 过渡持续时间
    3. Tailwind CSS 过渡计时函数
    4. Tailwind CSS 过渡延迟
    5. Tailwind CSS 动画
  16. Tailwind CSS 转换
    1. Tailwind CSS 变换
    2. Tailwind CSS 变换原点
    3. Tailwind CSS 缩放
    4. Tailwind CSS 旋转
    5. Tailwind CSS 平移
    6. Tailwind CSS 倾斜
  17. Tailwind CSS 交互
    1. Tailwind CSS 表单外观
    2. Tailwind CSS 光标效果
    3. Tailwind CSS 轮廓
    4. Tailwind CSS 指向事件
    5. Tailwind CSS 大小调整
    6. Tailwind CSS 用户选择
  18. Tailwind CSS SVG
    1. Tailwind CSS 填充
    2. Tailwind CSS 线条
    3. Tailwind CSS 线条厚度
  19. Tailwind CSS 可访问性
    1. Tailwind CSS 屏幕阅读器
  20. Tailwind CSS 官方插件
    1. Tailwind CSS Typography
    2. Tailwind CSS Forms
    3. Tailwind CSS Aspect Ratio
    4. Tailwind CSS Line Clamp
阅读(1.8k) 书签 赞(0) 我要纠错

Tailwind CSS 编辑器支持

2022-08-02 13:42 更新

编辑器支持

在使用 Tailwind CSS 时可以改善开发人员体验的插件和配置设置。

语法支持

Tailwind CSS 使用许多自定义 CSS 规则，例如 ​@tailwind​、​@apply​ 和 ​@screen​，在许多编辑器中，这可能会在无法识别这些规则的情况下触发警告或错误。

解决这个问题的方法几乎总是为您的编辑器/IDE 安装一个插件来支持 PostCSS 语言，而不是常规的 CSS。例如，VS Code 有一个 PostCSS 语言支持插件，你可以使用它与 Tailwind CSS 配合得很好。

在某些情况下，如果您的编辑器对 CSS 文件中预期的语法非常严格，您可能需要禁用原生 CSS linting/validations。

适用于VS代码的IntelliSense

用于Visual Studio Code的官方Tailwind CSS IntelliSense扩展，通过为用户提供自动完成、语法高亮和提示等高级功能，增强了Tailwind的开发体验。


  • 自动完成。对类名以及 CSS 函数和指令的智能建议。
  • 检查语法错误。突出显示 CSS 和标记中的错误和潜在错误。
  • 悬停预览。将鼠标悬停在 Tailwind 类名称上，查看完整的 CSS。
  • 语法高亮。提供语法定义，以便正确突出显示 Tailwind 功能。

查看 GitHub 上的项目以了解更多信息，或将其添加到 Visual Studio Code 以立即开始。

JetBrains IDE

WebStorm、PhpStorm 等 JetBrains IDE 包括在您的 HTML 中和使用 ​@apply​ 时对智能 Tailwind CSS 完成的支持。

详细了解 JetBrains IDE 中的 Tailwind CSS 支持 


以上内容是否对您有帮助：
← Tailwind CSS 升级指南
Tailwind CSS 使用预处理器 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号