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.

@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

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

bun add -D @types/ace @types/react @types/react-dom tailwindcss @types/mdx @next/mdx