Create highly reusable components using Tailwind CSS

some times we need to create highly reusable components like text components, input components, etc …

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces, paired with React you can create powerful and reusable components.

Installation

For this demo, we will use create-react-app to scaffold a new React application with typescript. We start by running the following command in our terminal:

npx create-react-app my-app --template typescript

We continue with the installation process by following the framework guide on TailwindCSS documentation:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After the packages are installed, we need to create a configuration file for Tailwind. To do this, create a file named tailwind.config.js in the root directory of your project. Inside the file, add the following code:

module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

Now, we need to add Tailwind CSS to our project. To do this, open the index.css file located in the public directory of the project, and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, we need to add the Tailwind directives to the index.js file located in the src directory of the project. To do this, add the following import statement:

import './index.css';

Congratulations! You have now created a Typescript React project and installed Tailwind CSS.

Next, we need to install the clsx package. To do this, open your command line and run the command npm install clsx. Once the package is installed, we can now use the clsx functions in our project.

Let’s create a simple Text Component

below the code provided is a functional React component called Text. It takes various props that allow the user to customize the text, such as the size, variant and type of HTML tag. This component uses the clsx package to create classes based on the size and variant props and uses them as a prop to determine which HTML tag to render.

import { clsx } from "clsx";

interface TextProps {
  size?: "sm" | "base" | "lg" | "xl";
  variant?: "gray" | "white" | "dark" | "red";
  as?: "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  className?: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}

const Text = ({
  size = "base",
  variant = "gray",
  as = "p",
  className,
  style,
  children
}: TextProps) => {
  const Tag = as;

  const sizes = {
    sm: "text-sm leading-normal",
    base: " text-base leading-normal",
    lg: " text-lg md:text-2xl leading-relaxed",
    xl: "text-xl md:text-3xl leading-relaxed"
  };

  const variants = {
    gray: "text-gray-600",
    white: "text-white",
    dark: "text-gray-900",
    red: "text-red-900"
  };

  return (
    <Tag
      className={clsx(sizes[size], variants[variant], className)}
      style={style}
    >
      {children}
    </Tag>
  );
};

export default Text;Now we can use it in our project. To do this, simply import the component, and add it to the appropriate place in your React component.

Now we can use it in our project. To do this, simply import the component, and add it to the appropriate place in your React component.

For example, if we wanted to render a h1 tag with a size of xl and a variant of dark, we could do the following:

import Text from "./Text";

// ... other code

<Text as="h1" size="xl" variant="dark">Hello World!</Text>

Now that you have created a Typescript React project and installed Tailwind CSS, you are ready to start building your next web development project. Using Tailwind CSS, you can quickly create beautiful designs with minimal effort. Additionally, you can use the clsx package to easily create classes based on props and render different HTML tags. With the tools and techniques outlined in this tutorial, you have everything you need to create amazing projects.

Good luck, and have fun! 👋