Package Exports

@erfanetoon/react-tailwind-ui
@erfanetoon/react-tailwind-ui/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@erfanetoon/react-tailwind-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind Ui Components

Getting Started

react-tailwind-ui is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.

Intall @erfanetoon/react-tailwind-ui.

npm i @erfanetoon/react-tailwind-ui

Once you install @erfanetoon/react-tailwind-ui you need to wrap your tailwind css configurations with the withTailwind() function coming from @erfanetoon/react-tailwind-ui.

const withTailwind = require("@erfanetoon/react-tailwind-ui/withTailwind");

module.exports = withTailwind({
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
});

@erfanetoon/react-tailwind-ui comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. You need to wrap your entire application with the ThemeProvider coming from @erfanetoon/react-tailwind-ui.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "@erfanetoon/react-tailwind-ui";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <ThemeProvider>
            <App />
        </ThemeProvider>
    </React.StrictMode>,
);

Congratulations 🥳, you did it, now you're ready to use @erfanetoon/react-tailwind-ui.

import { Button } from "@erfanetoon/react-tailwind-ui";

export default function Example() {
    return <Button>Button</Button>;
}