tailwindcss的使用

官网

使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式。让我们无需编写 CSS。

Tailwind CSS 的工作原理是扫描您的所有 HTML 文件、JavaScript 组件和任何其他模板以查找类名，生成相应的样式，然后将它们写入静态 CSS 文件。

它快速、灵活且可靠——运行时间为零。

浏览器支持

最新的v3版本不支持任何版本的 IE 浏览器，包括 IE 11。兼容IE的话需要使用v2版本。

如何使用

1. 安装

npm install -D tailwindcss postcss postcss-loader autoprefixer

npx tailwindcss init -p （生成 `tailwind.config.js` 和 `postcss.config.js文件）

2. 配置模板路径

在tailwind.config.js文件中添加所有模板文件的路径。

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 将 Tailwind 指令添加到您的 CSS

将Tailwind 的每个层的指令添加到您的./src/index.css文件中。

如果使用了antd的antd/dist/antd.less，注意引入顺序，以防 antd 组件样式被覆盖。

@tailwind base;

@tailwind components;

@tailwind utilities;

4. 现在项目中可以使用约定的类名来设置样式了。

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

VSCode插件配置

Tailwind CSS IntelliSense（强烈推荐）

用于 Visual Studio Code的官方扩展通过为用户提供自动完成、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验。

带来的体检：

• 类名自动提示补充。
• 突出显示css的错误和潜在错误。
• 悬浮时可查看完整的css代码。
• 语法高亮

其他 IDE 见官网介绍： Editor Setup - Tailwind CSS

Theme

按照UI设计的规范约定来配置自己项目的固定样式，来补充

const colors = {
  blue: '#1a66ff',
  border: '#ECEFF1',
  'light-blue': '#F2F9FF',
  'hover-blue': '#4287ff',
  primary: '#242b33',
  second: '#5C6773',
  third: '#8D99A6',
  danger: '#F53F3F',
};

const spacing = {
  0: 0,
  2: '2px',
  4: '4px',
  8: '8px',
  12: '12px',
  16: '16px',
  24: '24px',
  28: '28px',
  48: '48px',
};

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors,
      spacing,
      lineHeight: spacing,
      borderWidth: spacing,
      borderRadius: {
        sm: '2px',
        md: '4px',
        lg: '8px',
        full: '9999px',
      },
      fontSize: {},
    },
    borderColor: {
      default: 'rgba(36, 43, 51, 0.05)',
    },
    backgroundColor: {
      'hover-img': 'rgba(0, 0, 0, 0.5)',
      light: '#F7F9FA',
      white: '#ffffff',
    },
  },
  plugins: [require('@tailwindcss/line-clamp')],
};

Plugins

常用的单行和多行省略号 [@tailwindcss/line-clamp](https://link.juejin.cn/?target=https://www.npmjs.com/package/@tailwindcss/line-clamp)

配置

npm install -D @tailwindcss/line-clamp

 // tailwind.config.js

module.exports = {

  // ...

  plugins: [

    require('@tailwindcss/line-clamp'),

  ],

}

使用

<div class="line-clamp-3">

  <!-- ...3行后截断 -->  <div>

使用具体的px值

定义一个宽度为160px,高度为20px的盒子

<div className="w-[160px] h-[20px] line-clamp-3 ">

    碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪

</div>

在less中使用变量

使用theme() 函数来引用tailwind.config.js文件中定义好的变量

color: theme("colors.blue");