极客教程如何使用React Select与Tailwind Forms插件
Tailwind CSS 是一个用于网页设计的实用型优先的样式库。Tailwind forms是提供基本重置表单样式的插件，使得可以轻松通过工具进行表单元素的重写。它简化了样式化表单的过程。React Select是一个用于创建React多选异步支持的选择输入控件的库。 ****
创建React项目
步骤1： 使用以下命令创建React应用程序：
npx create-react-app <<Project Name>>
步骤2： 创建项目文件夹，例如folder_name，使用以下命令进入该文件夹：
cd <<Project Name>>
步骤3： 通过以下命令安装 react-select 和 clsx。
npm install react-select clsx
步骤4： 通过输入以下命令安装TailwindCSS。
npm install -D tailwindcss @tailwindcss/forms
npx tailwindcss init
步骤5： 将您的模板文件路径添加到tailwind.config.js中，并在tailwind.config.js中导入@tailwindcss/forms。
module.exports = {
content: ["./src/**/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/forms')],
}
步骤6： 将tailwind指令添加到您的index.css文件中
@tailwind base;
@tailwind components;
@tailwind utilities;
步骤7： 编译您的index.css文件以扫描模板
npx tailwindcss -i ./src/index.css -o ./public/output.css
步骤8： 将您编译后的 CSS 文件添加到<head>中，并开始使用 Tailwind 的实用类来为您的内容添加样式。
<link href="/public/output.css" rel="stylesheet">
现在，TailwindCSS、react-select和tailwind-form插件已经安装完毕，可以在项目中使用了。
项目结构
示例1： 在这个示例中，我们将使用基本的样式来显示在tailwind和tailwindcss表单中使用react-select组件。在react-select中，有20个内部组件可以进行样式设置。以下是其中的几个：
- Control（控制）: 用于设置选择组件的基本样式。
- Input（输入）: 用于设置组件搜索输入的样式。
- Menu（菜单）: 用于设置下拉列表的样式。
- Option（选项）: 用于设置选中或聚焦时列表的样式。
App.js 文件：在此文件中添加代码
// SelectTailwind.jsx
import clsx from "clsx";
import React from "react";
import Select from "react-select";
const SelectTailwind = () => {
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
return (
<div className=" bg-white text-black
flex flex-col
justify-center
items-center
h-screen w-full">
<h1 className=" flex flex-row
text-green-500
font-semibold
text-2xl">
GFG React-Select and Tailwind Forms Plugin
</h1>
<label htmlFor="wotailwind">Without Tailwind</label>
<Select id="wotailwind" options={options} />
<label htmlFor="wtailwind">With Tailwind</label>
<Select
id="wtailwind"
unstyled
options={options}
classNames={{
input: () => "[&_input:focus]:ring-0",
control: () => "form-multiselect p-6 ",
menu: () => "bg-slate-200 ",
option: ({ isFocused, isSelected }) =>
clsx(
isFocused &&
"hover:cursor-pointer
hover:bg-slate-500
px-3 py-2 rounded",
isSelected && "bg-slate-300"
),
}}
/>
</div>
);
};
export default SelectTailwind;
运行步骤： 在终端中输入以下命令来运行项目。
npm start
它将在浏览器中打开localhost:3000
输出：
示例2： 使用tailwind css样式对组件进行样式设置，并使用变量而不是直接在classNames中编写。因此，在这个示例中，我们使用变量来存储tailwind样式类，并将它们用于Select组件的classNames属性和isMulti属性，以设置组件以选择多个值。
- App.js ：在此文件中添加代码
//MultipleTailwind.jsx
import clsx from "clsx";
import React from "react";
import Select from "react-select";
const MultipleTailwind = () => {
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
const baseStyle =
"form-multiselect text-blue-800
border p-5 rounded-lg bg-red-400
hover:cursor-pointer";
const menuStyle =
" text-blue-900 border
rounded-lg bg-red-400
hover:cursor-pointer";
const optionStyles = {
focus: "hover:cursor-pointer
hover:bg-white
hover:text-black",
Selected: "bg-slate-300",
};
return (
<div className=" bg-white text-black
flex flex-col
justify-center
items-center
h-screen w-full">
<h1 className="text-green-500
font-semibold
text-2xl">
GFG React-MultiSelect and Tailwind Forms Plugin
</h1>
<label className="flavour">Multiselect :</label>
<Select
classNames={{
input: () => "[&_input:focus]:ring-0",
control: () => baseStyle,
menu: () => menuStyle,
option: ({ isFocused, isSelected }) =>
clsx(
isFocused && optionStyles.focus,
isSelected && optionStyles.Selected
),
}}
unstyled
id="flavour"
isMulti
styles={{
input: (base) => ({
...base,
"input:focus": {
boxShadow: "none",
},
}),
}}
options={options}
/>
</div>
);
};
export default MultipleTailwind;
运行步骤： 要运行该项目，请在终端中输入以下命令。
npm start
输出：
