73 lines
1.9 KiB
Markdown
73 lines
1.9 KiB
Markdown
# Tailwind CSS UI
|
|
|
|
A modular skeletal framework for tailwind css
|
|
|
|
## Perequisites
|
|
|
|
You need a couple of packages and settings to integrate this package
|
|
|
|
### Packages
|
|
|
|
- React
|
|
- React Dom
|
|
- Tailwind CSS **version 4**
|
|
|
|
### CSS Base
|
|
|
|
This package contains a `base.css` file which has all the base css rules required to run. This css file must be imported in your base project, and it can be update in a separate `.css` file.
|
|
|
|
```css
|
|
@import "../path/to/twui/base.css";
|
|
|
|
@theme inline {
|
|
--breakpoint-xs: 350px;
|
|
|
|
--color-background-light: #ffffff;
|
|
--color-foreground-light: #171717;
|
|
--color-background-dark: #0c0e11;
|
|
--color-foreground-dark: #ededed;
|
|
|
|
--color-primary: #e2b433;
|
|
--color-primary-hover: #9e7503;
|
|
--color-primary-outline: #29292b;
|
|
--color-primary-text: #29292b;
|
|
--color-primary-dark: #e2b433;
|
|
--color-primary-dark-hover: #f7cc59;
|
|
--color-primary-dark-outline: #e2b433;
|
|
--color-primary-dark-text: #f7cc59;
|
|
--color-secondary: #128b63;
|
|
--color-secondary-hover: #128b63;
|
|
--color-secondary-outline: #128b63;
|
|
--color-secondary-text: #128b63;
|
|
--color-secondary-dark: #128b63;
|
|
--color-secondary-dark-hover: #128b63;
|
|
--color-secondary-dark-outline: #128b63;
|
|
--color-secondary-dark-text: #128b63;
|
|
--color-accent: #000000;
|
|
--color-accent-hover: #dddddd;
|
|
--color-accent-outline: #dddddd;
|
|
--color-accent-text: #dddddd;
|
|
--color-accent-dark: #000000;
|
|
--color-accent-dark-hover: #dddddd;
|
|
--color-accent-dark-outline: #dddddd;
|
|
--color-accent-dark-text: #dddddd;
|
|
|
|
--color-price: #16946a;
|
|
--color-price-dark: #77ceb1;
|
|
}
|
|
|
|
.styles {
|
|
@apply text-sm;
|
|
}
|
|
```
|
|
|
|
### Install packages
|
|
|
|
```sh
|
|
bun add lucide-react tailwind-merge html-to-react gray-matter mdx typescript lodash react-code-blocks react-responsive-modal next-mdx-remote remark-gfm rehype-prism-plus openai
|
|
```
|
|
|
|
```sh
|
|
bun add -D @types/ace @types/react @types/react-dom tailwindcss @types/mdx @next/mdx
|
|
```
|