Tailwind Ui Components

$3

react-tailwind-ui is working with Tailwind CSS classes - Tailwind CSS Installation.

1. Install @erfanetoon/react-tailwind-ui.

``bash
npm i @erfanetoon/react-tailwind-ui
`

2. 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.

`js
const { withTailwind } = require("@erfanetoon/react-tailwind-ui/withTailwind");

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

3. @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.

`jsx
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(




,
);
`

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

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

export default function Example() {
return Button;
}
`

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

export default function Example() {
return Chip;
}
`

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

export default function Example() {
return CodeInput;
}
`

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

export default function Example() {
return Dropdown;
}
`

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

export default function Example() {
return Hint;
}
`

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

export default function Example() {
return IconButton;
}
`

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

export default function Example() {
return Input;
}
`

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

export default function Example() {
return PasswordInput;
}
`

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

export default function Example() {
return Textarea;
}
`

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

export default function Example() {
return 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

`jsx
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(

global={{
color: "red",
}}
>


,
);
`

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

`jsx
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

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

You can override screens in tailwind.config.js

`jsx
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

`jsx
global={{
direction: "rtl", // ltr | rtl
}}
>


`

Font Sizes

We define new font size values

`jsx
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

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

Box Shadows

We define new box shadow values

`jsx
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

`jsx
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

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

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

return;
<>
is2xs: {is2xs}


isXs: {isXs}


isSm: {isSm}


isMd: {isMd}


isLg: {isLg}


isXl: {isXl}


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
``