Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erfanetoon/react-tailwind-ui
Tailwind ui components for reactjs
https://github.com/erfanetoon/react-tailwind-ui
react tailwind
Last synced: 3 months ago
JSON representation
Tailwind ui components for reactjs
- Host: GitHub
- URL: https://github.com/erfanetoon/react-tailwind-ui
- Owner: erfanetoon
- Created: 2023-02-07T10:04:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-05T10:18:35.000Z (over 1 year ago)
- Last Synced: 2024-10-06T09:34:05.319Z (3 months ago)
- Topics: react, tailwind
- Language: TypeScript
- Homepage:
- Size: 68.4 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
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(
,
);
```
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
```
## 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
},
},
```## `tailwindcss-rtl` library
We use this library built-in and you can use its classes in your app