TailwindCss是什么

官网 总的来说, 就是设置好了一堆工具类, 定义好样式可以直接调用。

引入

  1. 安装
    1
    npm install -D tailwindcss
  2. 创建配置配件tailwind.config.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    npx tailwindcss init

    module.exports = {
      content: ["./src/**/*.{html,ts,js}"],
      theme: {
        extend: {},
      },
      plugins: [],
    }
  3. 在项目的公共css文件（src/style.css）中添加以下内容，用 @tailwind 指令添加 Tailwind
    1
    2
    3
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  4. 运行 tailwindcss CLI 工具，指定源文件 ./src/style.css 和输出文件./src/output.css，开启监听生效目录中所有出现的 class 类名的变化，并编译为 CSS。
    1
    npx tailwindcss -i ./src/style.css -o ./src/output.css --watch
  5. 在主入口App.js引入tailwindcss 编译的输出文件./src/output.css
    1
    2
    3
    4
    import "./output.css";

    const app = React.createElement(App, appProps, null);
    ReactDOM.render(app, document.getElementById('root'));

使用

1
2
3
4
<div className="content">
    <div className="flex flex-row mb-6 items-center pl-1">
    <div>
<div>

总结

最近在Github项目中看到TailwindCss中，于是便想着引入项目中。
在刚开始的使用TailwindCss中未生效，为了实现样式手写了部分…
现如今看来是少了第4步，未编译出对应CSS。
但是项目中并没有看到这一步，样式却生效了，对这一点我还是很好奇的！！！