tailwind使用指南

优先级

• tailwind中预先定义了三层layer
  • base, components, utilities
    • 默认在html标签中定义的只能被放到utilities层中

常用预制类

• child::常用预制类

响应式设计

• child::响应式pseudo

自定义配置

• 可以通过tailwind.config.js文件来自定义tailwind的配置
• 可以在此文件中添加新的颜色、字体等自定义项

示例

// tailwind.config.js
 
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#007bff',
      },
      fontFamily: {
        customFont: ['Montserrat', 'sans-serif'],
      },
    },
  },
}

在这个示例中，我们添加了一个名为customBlue的自定义颜色和一个名为customFont的自定义字体。这样在项目中就可以使用这些自定义项来定制样式。