React-tailwind-css-utilities: A Seamless Integration of Tailwind CSS with React Components

react-tailwind-css-utilities is a collection of pre-styled React components designed with Tailwind CSS utility classes. This package helps you quickly build beautiful and consistent user interfaces with minimal setup, simplifying the integration of commonly used UI components into your React projects.

Features

• 🔥 Pre-styled Components: Instant access to beautifully styled React components with Tailwind CSS utility classes
• 🔧 Customizable: Easily tweak and extend components by adding your own Tailwind CSS classes.
• 📱 Responsive: Effortlessly build responsive UIs with Tailwind CSS’s utility-first approach.
• ⚡ Minimal Setup Get started quickly with minimal configuration needed

Installation

• To install the package, use npm or yarn:

With Npm:

npm install react-tailwind-css-utilities

With Yarn:

yarn add react-tailwind-css-utilities

Usage

Add the components to your React app and start using them right away. They are pre-styled with Tailwind CSS utility classes, so you can quickly build beautiful user interfaces with minimal setup.

import React from "react";
import {
  Form,
  Label,
  Button,
  Select,
  Input,
  Checkbox,
  Switch,
  TextArea,
  Radio
} from "react-tailwind-css-utilities";
import 'react-tailwind-css-utilities/dist/tailwind.css';

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Form submitted");
  };

  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100">
      <Form onSubmit={handleSubmit}>
        <Label htmlFor="first-name">First Name</Label>
        <Input id="first-name" type="text" placeholder="Jane" />

        <Label htmlFor="last-name">Last Name</Label>
        <Input id="last-name" type="text" placeholder="Doe" />

        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" placeholder="********" />

        <Label htmlFor="bio">Bio</Label>
        <TextArea id="bio" placeholder="Tell us about yourself" />

        <Label htmlFor="city">City</Label>
        <Input id="city" type="text" placeholder="Albuquerque" />

        <Label htmlFor="state">State</Label>
        <Select id="state">
          <option>New Mexico</option>
          <option>Missouri</option>
          <option>Texas</option>
        </Select>

        <Label htmlFor="zip">Zip</Label>
        <Input id="zip" type="text" placeholder="90210" />

        <Label htmlFor="file">Upload File</Label>
        <Input id="file" type="file" />

        <Label htmlFor="gender">Gender</Label>
        <div className="flex mb-4">
          <Radio id="male" name="gender" value="male" label="Male" />
          <Radio id="female" name="gender" value="female" label="Female" />
        </div>

        <Label htmlFor="newsletter">Subscribe to Newsletter</Label>
        <Checkbox id="newsletter" className="mb-4" />

        <Label htmlFor="active">Active Status</Label>
        <Switch id="active" className="mb-4" />

        <Button type="submit">Submit</Button>
      </Form>
    </div>
  );
}

export default App;

Contributing

Please read the contribution guidelines before contributing.

License

This project is licensed under the MIT License. See the LICENSE file for details.