Tailwind CSS

什么是 Tailwind CSS

Tailwind CSS 是一个实用工具类优先的 CSS 框架，它提供了一系列预定义的、高度可定制的CSS工具类，使开发者能够快速构建响应式和一致性用户界面，而无需编写传统的 CSS。 Github：https://github.com/tailwindlabs/tailwindcss

参考

Tailwind CSS 官方文档

tailwind-merge

tsx

import { twMerge } from 'tailwind-merge';
import clsx from 'clsx';

document.documentElement.style.fontSize = '14px';
// 本组件只是一个简单的 UI 组件，学习时无需多过关注

export default function Button(props) {
  const { className, primary, danger, sm, lg, success, ...other } = props;
  const base = 'rounded-md border border-transparent font-medium cursor-pointer transition';

  // type
  const normal = 'bg-gray-100 hover:bg-gray-200';

  // size
  const md = 'text-xs py-2 px-4';

  const cls = twMerge(clsx(base, normal, md, {
    // type
    'bg-blue-500 text-white hover:bg-blue-600': primary,
    'bg-red-500 text-white hover:bg-red-600': danger,
    'bg-green-500 text-white hover:bg-green-600': success,

    // size
    'text-xs py-1.5 px-3': sm,
    'text-lg py-2 px-6': lg,
  }));

  return (
    <button className={cls} {...other}>{props.children}</button>
  );
}

骨架屏

tsx

export default function Skeleton(props) {
  return (
    <div className="border border-blue-100 shadow rounded-md p-4 w-full">
      <div className="animate-pulse flex space-x-4">
        <div className="rounded-full bg-slate-200 h-10 w-10"></div>
        <div className="flex-1 space-y-6 py-1">
          <div className="h-2 bg-slate-200 rounded"></div>
          <div className="space-y-3">
            <div className="grid grid-cols-3 gap-4">
              <div className="h-2 bg-slate-200 rounded col-span-2"></div>
              <div className="h-2 bg-slate-200 rounded col-span-1"></div>
            </div>
            <div className="h-2 bg-slate-200 rounded"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

封装cn

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

使用

tsx

<div
  className={cn(
    'flex flex-col',
    showSideBar && 'p-4 pt-2 pr-2',
    !((w('md') && h('md')) || !showSideBar) && 'hidden'
  )}
  style={{
    gridArea: '1 / 1 / -1 / -1',
    transform: showSideBar
      ? `translate(${pos.x}px, ${pos.y}px) scale(${pos.scale})`
      : 'translate(0px, 0px) scale(1)',
    transformOrigin: 'top left'
  }}
>
  <PlayerPPlayer />
</div>;

tailwindcss-animate

Contributors

作者:Long Mo

字数统计:429 字

阅读时长:2 分钟

Long Mo

文章作者：Long Mo

Tailwind CSS ​

什么是 Tailwind CSS ​

参考 ​

tailwind-merge ​

骨架屏 ​

封装cn ​

tailwindcss-animate ​

Contributors ​