react-tailwind-ui is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.
@erfanetoon/react-tailwind-ui
.npm i @erfanetoon/react-tailwind-ui
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: [],
});
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>,
);
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>;
}
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: "",
}
}
},
},
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
},
},
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>
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
},
},
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
},
},
tailwindcss-rtl
libraryWe use this library built-in and you can use its classes in your app