Package Exports

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 - Tailwind CSS Installation.

Install @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 global={{}}>
            <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>;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Colors

Our color palette is same as tailwindcss - Tailwind CSS Colors., but we add 3 new colors as primary (default is blue) secondary (default is pink) tertiary (default is emerald) that you can modify and assign your color spectrum to them, we use primary as our default color in all component, you can change it in themeProvider global object

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
            global={{
                color: "red",
            }}
        >
            <App />
        </ThemeProvider>
    </React.StrictMode>,
);

You can modify our colors as same as example that we provided here, you can use Hihayk Color Generator for generate color spectrum

theme: {
    extend: {
      colors: {
        primary: {
            50: "",
            100: "",
            200: "",
            300: "",
            400: "",
            500: "",
            600: "",
            700: "",
            800: "",
            900: "",
        }
      }
    },
},

Breakpoints

We add new breakpoint size as xs, this will help you to handle responsive design better

xs: "480px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",

You can override screens in tailwind.config.js

theme: {
    screens: {
      // your values
    },
},

Direction (rtl support)

We handle rtl and ltr design, you can put your ideal direction on ThemeProvider and you can use it with this pattern rtl:text-left ltr:text-right

<ThemeProvider
    global={{
        direction: "rtl", // ltr | rtl
    }}
>
    <App />
</ThemeProvider>

Font Sizes

We define new font size values

xs: ["0.625rem", "0.75rem"],
sm: ["0.75rem", "1rem"],
base: ["0.875rem", "1.25rem"],
lg: ["1rem", "1.5rem"],
xl: ["1.125rem", "1.75rem"],
"2xl": ["1.25rem", "1.75rem"],
"3xl": ["1.5rem", "2rem"],
"4xl": ["1.875rem", "2.25rem"],
"5xl": ["2.25rem", "2.5rem"],
"6xl": ["3rem", "1rem"],
"7xl": ["3.75rem", "1rem"],
"8xl": ["4.5rem", "1rem"],
"9xl": ["6rem", "1rem"],
"10xl": ["8rem", "1rem"],

You can override fontSize in tailwind.config.js

theme: {
    fontSize: {
      // your values
    },
},

Box Shadows

We define new box shadow values

sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
none: "0 0 rgb(0, 0 / 0, 0)",

You can override boxShadow in tailwind.config.js

theme: {
    boxShadow: {
      // your values
    },
},

Hooks

We provide some hooks to help you code better

useResponsive

This hook help you to calculate the active window system and the values that return to us are sync with breakpoints in tailwind config

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

const AppComponent = () => {
    const { is2xs, isXs, isSm, isMd, isLg, isXl, is2xl } = useResponsive();

    return;
    <>
        is2xs: {is2xs}
        <br />
        isXs: {isXs}
        <br />
        isSm: {isSm}
        <br />
        isMd: {isMd}
        <br />
        isLg: {isLg}
        <br />
        isXl: {isXl}
        <br />
        is2xl: {is2xl}
    </>;
};

export default AppComponent;

Typescript

This library is based on typescript ^v5 and every section of it has own types and all available types return to use theme

Contribute

For contribute in this library you must create an issue first and describe all of your changes there and after that fork this library and apply your changes and then creat ea pull request and notice me on that issue,

Don't forget to add your name in `CONTRIBUTORS.md` file