Published:August 11, 2021
Updated: November 15, 2023
Views: 27,158
TailwindCSS is a utility first CSS framework that we have been using for the past 2 years and we have countless of projects build with it. While building web applications at scale you will often have to build reusable components. Although there are various ways to do that we will explain our process of creating a Button component with React and Tailwind.
Note: For UI Components, Typescript is more suitable because of its interfaces, enums, etc. It's also easier to do prop validation. In this tutorial, we wanted to stick to basics, so plain React is used. We might release a Typescript version in the near future.
We start by initializing a new React project. We will be using Vite for development because it's faster and lightweight.
npm init vite@latest tw-components --template react
After the required packages have been installed we proceed to install Tailwind by following their official setup guide.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
We create the config file and PostCSS setup with the command:
npx tailwindcss init -p
Now after we have the tailwind.config.js
file we need to update it in order for the JIT plugin to work correctly. We add mode: 'jit'
and update the purge
key.
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false,
mode: 'jit', // add this
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Last but not least, we update the index.css
file in order to add the Tailwind styles.
@tailwind base;
@tailwind components;
@tailwind utilities;
After importing the three directives, we will cleanup our project a bit, remove the App.css
file, and update the App.jsx
file so we can insert our Button
component inside of it.
import React from 'react'
function App() {
return (
<div className="container mx-auto py-32">
{/* Buttton will be here */}
</div>
)
}
export default App
We create a folder called components
inside the src
directory and add a Button.jsx
file.
We add some base props for our Button but you can extend them depending on the scope, in our case we will be adding children
, type
, className
, variant
, size
, pill
, disabled
and the rest of the props. We will also be importing forwardRef
so we can pass down the ref
.
import React, { forwardRef } from 'react'
const Button = forwardRef(
(
{
children,
type = 'button',
className,
variant = 'primary',
size = 'normal',
pill,
disabled = false,
...props
}, ref
) => (
<button
ref={ref}
disabled={disabled}
type={type}
{...props}
>
{children}
</button>
));
export default Button
As we can see from the code above, we already added default states for size
, variant
, disabled
and type
.
For styling, we create a classes
object where we declare the base styles and all the possible variants and sizes of our component. Then, in our className
we join them together to create a composable component.
We create 3 variants for our Button
component: primary
, secondary
and danger
. In your design specification, you might have more but we will keep it minimal for this example.
const classes = {
base: 'focus:outline-none transition ease-in-out duration-300',
disabled: 'opacity-50 cursor-not-allowed',
pill: 'rounded-full',
size: {
small: 'px-2 py-1 text-sm',
normal: 'px-4 py-2',
large: 'px-8 py-3 text-lg'
},
variant: {
primary: 'bg-blue-500 hover:bg-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-white',
secondary: 'bg-gray-200 hover:bg-gray-800 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 text-gray-900 hover:text-white',
danger: 'bg-red-500 hover:bg-red-800 focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 text-white'
}
}
Here in our class object we have defined a few keys, base
is where our default styling goes, and we have a pill
key in case our button is rounded, size
for controlling padding and variant
for our different button styles.
Now we need to toggle these classes based on the button prop value, but before we do that we will introduce a new cls
function that will clear up all the empty white-spaces and format our className
before rendering the component. We will add this function to our utils.js
file placed under src/utils/
.
export const cls = (input) =>
input
.replace(/\s+/gm, " ")
.split(" ")
.filter((cond) => typeof cond === "string")
.join(" ")
.trim();
Now with this function in our utils
folder, we can call our styles from the classes object and render them conditionally based on the prop value. For now, our Button
component should look like this:
import React, { forwardRef } from 'react'
import { cls } from '../utils/helpers'
const classes = {
base: 'focus:outline-none transition ease-in-out duration-300',
disabled: 'opacity-50 cursor-not-allowed',
pill: 'rounded-full',
size: {
small: 'px-2 py-1 text-sm',
normal: 'px-4 py-2',
large: 'px-8 py-3 text-lg'
},
variant: {
primary: 'bg-blue-500 hover:bg-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-white',
secondary: 'bg-gray-200 hover:bg-gray-800 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 text-gray-900 hover:text-white',
danger: 'bg-red-500 hover:bg-red-800 focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 text-white'
}
}
const Button = forwardRef(
(
{
children,
type = 'button',
className,
variant = 'primary',
size = 'normal',
pill,
disabled = false,
...props
}, ref
) => (
<button
ref={ref}
disabled={disabled}
type={type}
className={cls(`
${classes.base}
${classes.size[size]}
${classes.variant[variant]}
${pill && classes.pill}
${disabled && classes.disabled}
${className}
`)}
{...props}
>
{children}
</button>
));
export default Button
Now in order to mitigate errors we have to do some prop checking, for UI Components Typescript is the best solution but since we are using plain React we can install the prop-types
library for type checking. This will provide runtime errors for our props if an invalid value is given.
Note: Depending on your project specification, you shouldn't ship PropTypes in production as it's only used for development.
npm install --save prop-types
Before we export our Button we need to declare the PropTypes based on the data they need to receive, in our case:
Button.propTypes = {
children: PropTypes.node.isRequired,
type: PropTypes.oneOf(['submit', 'button']),
className: PropTypes.string,
pill: PropTypes.bool,
disabled: PropTypes.bool,
variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
size: PropTypes.oneOf(['small', 'normal', 'large'])
}
For better component development we would suggest the use of Storybook, as it helps you develop components in isolation but we will not cover that in this tutorial.
With PropTypes added, the final version of our Button component looks like the following:
import React, { forwardRef } from 'react'
import PropTypes from 'prop-types';
import { cls } from '../utils/helpers'
const classes = {
base: 'focus:outline-none transition ease-in-out duration-300',
disabled: 'opacity-50 cursor-not-allowed',
pill: 'rounded-full',
size: {
small: 'px-2 py-1 text-sm',
normal: 'px-4 py-2',
large: 'px-8 py-3 text-lg'
},
variant: {
primary: 'bg-blue-500 hover:bg-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-white',
secondary: 'bg-gray-200 hover:bg-gray-800 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 text-gray-900 hover:text-white',
danger: 'bg-red-500 hover:bg-red-800 focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 text-white'
}
}
const Button = forwardRef(
(
{
children,
type = 'button',
className,
variant = 'primary',
size = 'normal',
pill,
disabled = false,
...props
}, ref
) => (
<button
ref={ref}
disabled={disabled}
type={type}
className={cls(`
${classes.base}
${classes.size[size]}
${classes.variant[variant]}
${pill && classes.pill}
${disabled && classes.disabled}
${className}
`)}
{...props}
>
{children}
</button>
));
Button.propTypes = {
children: PropTypes.node.isRequired,
submit: PropTypes.oneOf(['submit', 'button']),
className: PropTypes.string,
pill: PropTypes.bool,
disabled: PropTypes.bool,
variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
size: PropTypes.oneOf(['small', 'normal', 'large'])
}
export default Button
You can extend this to add more variants, sizing, and other props but in general, this is how we build reusable components with React and Tailwind CSS.
If you need help with a Laravel project let's get in touch.
Lucky Media is proud to be recognized as a Top Laravel Development Agency by Clutch, a leading B2B ratings and reviews platform.
At Lucky Media, we offer a range of services including website development, web application development, and mobile apps development. We specialize in Statamic, React Native, Next.js, AI and ML solutions. We also provide staff augmentation and TALL stack development services.
For more insights into our work, check out our case studies on revolutionising lead generation with AI, customized coaching site, healthcare digitization, next-level performance, lead generation and patient journey, WordPress to Statamic migration, and improving user experience. These case studies provide a glimpse into how we tailor our technology choices to meet specific client needs and deliver exceptional results.
Related Posts
Stay up to date
Be updated with all news, products and tips we share!