taillwindcss常用

背景

bg-indigo-500 背景颜色500

文本

text-white 文本颜色

flex 布局

flex flex布局

items-center 垂直居中

justify-between 两端对齐

边距

p-4 padding边距
px-4 x轴的padding
py-4y轴的padding

m-4 margin 同理
mx-auto x轴居中

mt-[1440px] 自定义距离
mx- x轴
my- y轴
mt- 上边距
mb- 下边距
ml- 左边距
mr- 右边距

space-x-6 设置子元素的margin

宽度

max-w-screen-lg 最大宽度 1024px

style

block 块级元素

uniapp中配置

看这个文档

https://blog.csdn.net/qq_33020601/article/details/126085539

和预处理器一块使用

https://www.tailwindcss.cn/docs/using-with-preprocessors

安装

npm install -D postcss-import

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

css嵌套规则

npm install -D postcss-nesting

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  }
}

不起作用，Sass 抱怨 ！important

.alert {
  @apply bg-red-500 #{!important};
}