我对尾风，radix UI和Shadcn UI的诚实评论-DEV365 开发者社区

我对这些CSS Librarieis的诚实评论

近年来，使用CSS库来加快和简化Web应用程序的开发，趋势越来越大。当今最受欢迎的CSS库中的三个是尾风，Radix UI和Shadcn UI。

tailwind 是一种实用第一的CSS框架，可让您以最少的代码构建自定义样式。它在开发人员中非常受欢迎，因为它具有高度可定制的，可用于创建各种各样的设计。但是，一开始可能很难学习，如果您不小心，犯错可能很容易。

radix ui 是一个基于组件的CSS库，可提供一组现成的组件，您可以用来构建Web应用程序。对于想要快速入门而不必担心编写自定义CSS的开发人员来说，这是一个不错的选择。但是，如果您需要创建自定义组件，则radix UI可能有点限制，并且比其他CSS库更昂贵。

shadcn UI 是一个相对较新的CSS库，结合了尾风和radix UI的最佳功能。它像尾风一样高度可定制，但也提供了一组现成的组件，例如Radix UI。 Shadcn UI是一个不错的选择，对于希望在组件库的便利性方面灵活的开发人员中。

这是一个表，总结了每个CSS库的优点，缺点和关键功能：

更昂贵那样广泛使用

tailwind	优点	缺点	关键功能
tailwind	高度可定制的，可用于创建各种各样的设计	一开始很难学习，很容易犯错	公用事业第一CSS框架，允许您以最少的代码构建自定义样式
radix ui	现成的组件，易于启动	如果您需要创建自定义组件，则可能是限制的，比其他CSS库	基于组件的CSS库，提供了一组现成的组件，您可以用来构建Web应用程序
shadcn ui	高度可定制的，现成的组件，易于学习	不像尾风或radix UI	结合了高度自定义的尾风和radix UI的最佳功能，提供了一组现成的组件

安装

这是如何设置每个库的快速概述：

tailwind：要设置尾风，您需要安装tailwindcss软件包和postcss软件包。您可以使用以下命令来执行此操作：

npm install tailwindcss postcss

安装软件包后，您需要在项目的根目录中创建一个tailwind.config.js文件。该文件将包含尾风的配置设置。您可以在Tailwind documentation

中找到有关配置设置的更多信息

radix ui：要设置radix ui，您需要安装radix-ui/themes软件包，然后需要随后的任何其他软件包。今天，我将向您展示如何安装lastinng
radix-ui/themes
radix-ui/react-alert-dialog

入门

安装

1.安装radix主题

从您的命令行安装软件包。

npm	纱	pnpm
`npm install @radix-ui/themes`	`yarn add @radix-ui/themes`	`pnpm install @radix-ui/themes`

2.导入CSS文件

在您的应用程序的根部导入全局CSS文件。

import '@radix-ui/themes/styles.css';

3.添加主题组件

将应用程序的根部包裹在Theme组件中。

import { Theme } from '@radix-ui/themes';

export default function () {
  return (
    <Theme>
      <MyApp />
    </Theme>
  );
}

4.开始建造

您现在准备使用radix主题组件。

import { Flex, Text, Button } from '@radix-ui/themes';

export default function MyApp() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes :)</Text>
      <Button>Let's go</Button>
    </Flex>
  );
}

自定义主题

Learn More

使用radix-ui安装反应式数字

安装组件

npm install @radix-ui/react-dialog

用法

//index.tsx

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
import './styles.css';

const AlertDialogDemo = () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger asChild>
      <button className="Button violet">Delete account</button>
    </AlertDialog.Trigger>
    <AlertDialog.Portal>
      <AlertDialog.Overlay className="AlertDialogOverlay" />
      <AlertDialog.Content className="AlertDialogContent">
        <AlertDialog.Title className="AlertDialogTitle">Are you absolutely sure?</AlertDialog.Title>
        <AlertDialog.Description className="AlertDialogDescription">
          This action cannot be undone. This will permanently delete your account and remove your
          data from our servers.
        </AlertDialog.Description>
        <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
          <AlertDialog.Cancel asChild>
            <button className="Button mauve">Cancel</button>
          </AlertDialog.Cancel>
          <AlertDialog.Action asChild>
            <button className="Button red">Yes, delete account</button>
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

export default AlertDialogDemo;

使用默认的CSS


/* styles.css */

@import '@radix-ui/colors/black-alpha.css';
@import '@radix-ui/colors/mauve.css';
@import '@radix-ui/colors/red.css';
@import '@radix-ui/colors/violet.css';

/* reset */
button {
  all: unset;
}

.AlertDialogOverlay {
  background-color: var(--black-a9);
  position: fixed;
  inset: 0;
  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.AlertDialogContent {
  background-color: white;
  border-radius: 6px;
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 500px;
  max-height: 85vh;
  padding: 25px;
  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.AlertDialogContent:focus {
  outline: none;
}

.AlertDialogTitle {
  margin: 0;
  color: var(--mauve-12);
  font-size: 17px;
  font-weight: 500;
}

.AlertDialogDescription {
  margin-bottom: 20px;
  color: var(--mauve-11);
  font-size: 15px;
  line-height: 1.5;
}

.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  height: 35px;
}
.Button.violet {
  background-color: white;
  color: var(--violet-11);
  box-shadow: 0 2px 10px var(--black-a7);
}
.Button.violet:hover {
  background-color: var(--mauve-3);
}
.Button.violet:focus {
  box-shadow: 0 0 0 2px black;
}
.Button.red {
  background-color: var(--red-4);
  color: var(--red-11);
}
.Button.red:hover {
  background-color: var(--red-5);
}
.Button.red:focus {
  box-shadow: 0 0 0 2px var(--red-7);
}
.Button.mauve {
  background-color: var(--mauve-4);
  color: var(--mauve-11);
}
.Button.mauve:hover {
  background-color: var(--mauve-5);
}
.Button.mauve:focus {
  box-shadow: 0 0 0 2px var(--mauve-7);
}

@keyframes overlayShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

将组件与尾风CSS一起使用


//index.tsx

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';

const AlertDialogDemo = () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger asChild>
      <button className="text-violet11 hover:bg-mauve3 shadow-blackA7 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
        Delete account
      </button>
    </AlertDialog.Trigger>
    <AlertDialog.Portal>
      <AlertDialog.Overlay className="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0" />
      <AlertDialog.Content className="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
        <AlertDialog.Title className="text-mauve12 m-0 text-[17px] font-medium">
          Are you absolutely sure?
        </AlertDialog.Title>
        <AlertDialog.Description className="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
          This action cannot be undone. This will permanently delete your account and remove your
          data from our servers.
        </AlertDialog.Description>
        <div className="flex justify-end gap-[25px]">
          <AlertDialog.Cancel asChild>
            <button className="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
              Cancel
            </button>
          </AlertDialog.Cancel>
          <AlertDialog.Action asChild>
            <button className="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
              Yes, delete account
            </button>
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

export default AlertDialogDemo;

shadcn ui：要设置shadcn ui，您需要与您的新shadcn项目初始化，shadcn随附一个与您最喜欢的frameworks集成的CLI，示例为Next.js，Vite，Vite，Remix，Remix，Gatsby，Astro，Astro，Astro等。选择您喜欢的框架并运行CLI

示例使用Next.js

创建项目：

首先使用create-next-app创建一个新的next.js项目

pnpm create next-app@latest my-app --typescript --tailwind --eslint

运行CLI：

运行shadcn-ui init命令来设置您的项目：

pnpm dlx shadcn-ui@latest init

配置components.json：

您将被问到几个问题要配置components.json：

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

应用结构：

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

我将UI组件放在components/ui文件夹中。
将其余组件（例如<PageHeader />和<MainNav />）放置在components文件夹中。
lib文件夹包含所有实用程序功能。我有一个utils.ts，我在其中定义了cn助手。
styles文件夹包含全局CSS。

就是这样：

您现在可以开始在项目中添加组件。

pnpm dlx shadcn-ui@latest add button

上面的命令将将Button组件添加到您的项目中。然后您可以这样导入：

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

主要特征

当然，这是尾风，radix ui和shadcn UI的关键特征：

tailwind

高度自定义
可用于创建各种各样的设计
易于学习
可以与任何JavaScript框架一起使用
提供广泛的公用事业类
可用于创建自定义组件

radix ui

现成的组件
轻松入门
提供多种组件
支持各种屏幕尺寸
记录有充分的文献
积极维护

shadcn ui

结合了尾风和radix UI
高度自定义
提供一组现成的组件
易于学习
积极维护

这是一个表，总结了每个CSS库的关键功能：

tailwind	高度可自定义，可用于创建各种各样的设计，易于学习，可以与任何JavaScript框架一起使用，提供各种实用程序类，可用于创建自定义组件
radix ui	现成的组件，易于启动，提供各种组件，支持各种屏幕尺寸，有据可查，积极维护
shadcn ui	结合了高度定制的尾风和radix UI的最佳功能，提供了一组现成的组件，易于学习，积极维护

我的建议

当然，这是三个CSS库的摘要，以及我的建议，最容易设置和理解：

tailwind 是最可定制的库，但也可能是最难学习和设置的库。对于想要完全控制其CSS的开发人员来说，这是一个不错的选择，但这可能不是初学者的最佳选择。
radix ui 是最容易设置和理解的库。它提供了一组现成的组件，您可以使用这些组件来构建Web应用程序，而无需编写任何自定义CSS。但是，Radix UI不像尾风那样可自定义，因此对于需要对其CSS进行大量控制的开发人员来说，它可能不是最佳选择。
shadcn UI 是尾风和radix UI之间的良好折衷。它比Radix UI可以定制，但是设置和理解也比尾风更容易。 Shadcn UI是想要平衡自定义和易用性的开发人员的好选择。

我建议最简单的库设置和理解的库是Shadcn UI。对于各个级别的开发人员来说，这是一个不错的选择，它提供了良好的自定义和易用性平衡。