|
Tailwind CSS, a utility-first styling library for web design, offers Tailwind forms as plugins that provide a foundational reset for form styles. This simplifies the styling process for form elements, allowing easy customization with utilities. React Select, a select component library, is employed for crafting Select Input controls in React with built-in multiselect and async support.
Prerequisites:Steps to create React Project and install required modules:Step 1: Create a React application using the following command:
npx create-react-app <<Project Name>> Step 2: After creating your project folder i.e. folder_name, move to it using the following command:
cd <<Project Name>> Step 3: Install react-select and clsx writing the following command.
npm install react-select clsx Step 4: Install TailwindCSS by writing the following command.
npm install -D tailwindcss @tailwindcss/forms
npx tailwindcss init Step 5: Add the paths of your template file and import @tailwindcss/forms in tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/forms')],
}Step 6: Add the tailwind directives to your index.css file
@tailwind base;
@tailwind components;
@tailwind utilities; Step 7: Compile your index.css file to scan the template
npx tailwindcss -i ./src/index.css -o ./public/output.css Step 8: Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.
<link href="/public/output.css" rel="stylesheet"> Now TailwindCSS and react-select and tailwind-form plugin is now installed and ready to be used in the project
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"clsx": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-select": "^5.8.0",
"web-vitals": "^2.1.4",
}Example 1: In this, we will use basic styling to display react-select components using tailwind and tailwindcss forms. In react-select, there are 20 internal components that we can style. Few are given below:
- Control: It is used to style the base of the select component.
- Input: It is used to style the input search of the component.
- Menu: To style the dropdown list.
- Option: To style the list when they are selected or focused.
JavaScript
// 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;
Steps to run: To run the project enter the following command in Terminal.
npm start Output:
Example 2: In this example, we will use tailwind css styling to style the components and use variables instead of writing directly in classNames.
JavaScript
//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;
Steps to Run: To run the project enter the following command in Terminal.
npm start Output:
|
.png){kind=small}