Tailwind Css重复样式处理

今天又迟到了

已于 2024-09-26 17:27:52 修改

阅读量402

点赞数 2

文章标签： css 前端

于 2024-09-26 17:18:57 首次发布

本文链接：https://blog.csdn.net/m0_46258282/article/details/142566641

版权

如果多个组件都需要用到相同的Tailwind Css类名，会显得代码非常的冗余
如下：

const Home = () => {
  const list = useSelector((state: stateType) => state.state.stateList);
  return (
    <div className="w-full m-2">
      {list.map((e, index) => (
        <div key={index}>
          <div className="flex justify-center items-center gap-3 mb-3.5">
            名称:
            <Input type="text" value={e.name} style={{ width: "85%" }} />
          </div>
          <div className="flex justify-center items-center gap-3 mb-3.5">
            颜色:
            <Input type="color" value={e.color} style={{ width: "80%" }} />
          </div>
        </div>
      ))}
    </div>
  );
};

我们可以通过Tailwind Css为我们提供的@tailwind components引入自定义组件样式，将需要重复使用的内容提取为组件
如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .annotation-form {
        @apply flex justify-center items-center gap-3 mb-3.5
    }
}

然后在组件替换成该类名

const Home = () => {
  const list = useSelector((state: stateType) => state.state.stateList);
  return (
    <div className="w-full m-2">
      {list.map((e, index) => (
        <div key={index}>
          <div className="annotation-form">
            名称:
            <Input type="text" value={e.name} style={{ width: "85%" }} />
          </div>
          <div className="annotation-form">
            颜色:
            <Input type="color" value={e.color} style={{ width: "80%" }} />
          </div>
        </div>
      ))}
    </div>
  );
};