https://github.com/danpacho/tailwindest
Create tailwind types & Build type-safe tailwind products.
https://github.com/danpacho/tailwindest
create-tailwind-type tailwind typescript
Last synced: 2 months ago
JSON representation
Create tailwind types & Build type-safe tailwind products.
- Host: GitHub
- URL: https://github.com/danpacho/tailwindest
- Owner: danpacho
- License: mit
- Created: 2022-09-21T13:55:07.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-03-22T07:42:56.000Z (2 months ago)
- Last Synced: 2025-03-29T04:06:00.024Z (2 months ago)
- Topics: create-tailwind-type, tailwind, typescript
- Language: TypeScript
- Homepage:
- Size: 32.2 MB
- Stars: 142
- Watchers: 2
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
## Build type-safe tailwindcss product
### 1. Create tailwind types
> [!NOTE]
>
> `create-tailwind-type` will generate type definitions for your tailwind configuration.
```bash
npx create-tailwind-type --base node_modules/tailwindcss --no-arbitrary-value --disable-variants
```
This command will generate `tailwind.ts` file in the root directory.
### 2. Install package
```bash
npm i tailwindest@latest
```
### 3. Create tools
```ts
import { createTools, type CreateTailwindest } from "tailwindest"
import type { Tailwind, TailwindNestGroups } from "./tailwind"
import { twMerge } from "tailwind-merge"
type Tailwindest = CreateTailwindest<{
tailwind: Tailwind
tailwindNestGroups: TailwindNestGroups
groupPrefix: "$" // prefix for nest groups, [optional]
useArbitrary: true // use arbitrary values, [optional]
}>
export const tw = createTools({
merger: twMerge, // set tailwind-merge as merger, [optional]
})
```
### 4. Use tools
#### Def - `tw.def(classList, ...styleList)`
```tsx
const condition: boolean = true
const container = tw.def(
// 🚀 Powered by clsx
[
// ✅ Statically typed literals
"flex",
"size-fit",
"flex-col",
"items-center",
"justify-center",
"gap-y-12",
// ✅ Arbitrary strings
"md:flex-row md:gap-x-7",
"lg:gap-x-24",
// ✅ Conditional styling
condition ? "p-3" : "p-1",
// ✅ Array-based styling
["dark:text-white", "text-black"],
],
// 🚀 Default merging behavior
{
// ✅ Record-based styling
backgroundColor: "bg-white",
dark: {
backgroundColor: "dark:bg-black",
},
},
{
// ✅ Support for infinite record styling
// Additional styles here...
}
)
const Box = ({ children }) =>
{children}
```
#### Style - `tw.style(stylesheet)`
```tsx
const box = tw.style({
display: "flex",
alignItems: "items-center",
justifyContent: "justify-center",
padding: ["px-[2.25px]", "py-1"],
$hover: {
opacity: "hover:opacity-90",
},
$sm: {
padding: ["sm:px-[4.5px]", "sm:py-2"],
},
})
const Box = ({ children }) => {
return
{children}
}
const Box2 = ({ children }) => {
// pass arbitrary classnames
return
{children}
}
```
#### Toggle - `tw.toggle({ truthy, falsy, base })`
If you want to change the style based on a **single `boolean` condition**, use `toggle`.
```tsx
const themeBtn = tw.toggle({
truthy: {}, // › light mode
falsy: {}, // › dark mode
base: {}, // [optional] base style
})
const ThemeBtn = ({ children }) => {
const [isLight, setIsLight] = useState(false)
return {children}
}
```
#### Rotary - `tw.rotary({ variants, base })`
If you need to change styles based on **three or more conditions within a single category**, use `rotary`.
```tsx
import { type GetVariants } from "tailwindest"
const btn = tw.rotary({
variants: {
success: {}, // › success
warning: {}, // › warning
error: {}, // › error
},
base: {}, // [optional] base style
})
interface BtnProps {
onClick: () => void
children: ReactNode
type?: GetVariants
}
const Btn = ({ onClick, children, type = "default" }: BtnProps) => (
{children}
)
```
#### Variants - `tw.variants({ variants, base })`
```tsx
const btn = tw.variants({
variants: {
type: {
default: {}, // › type.default
success: {}, // › type.success
warning: {}, // › type.warning
},
size: {
sm: {}, // › size.sm
md: {}, // › size.md
lg: {}, // › size.lg
},
border: {
sm: {}, // › border.sm
md: {}, // › border.md
lg: {}, // › border.lg
},
},
base: {}, // [optional] base style
})
interface BtnProps extends GetVariants {
onClick: () => void
children: ReactNode
}
const Btn = ({
children,
size = "md",
border = "md",
type = "default",
onClick,
}: BtnProps) => (
{children}
)
```
---
## Create Tailwind Type
Generate typescript definitions for your tailwind configuration.
```bash
npx create-tailwind-type
```
> [!IMPORTANT]
> **Requires Tailwind CSS `v4.0.0` or higher.**
### Usage Examples
- **Use custom plugins**
**Should change base directory to `node_modules/tailwindcss`** for your own project.
```bash
npx create-tailwind-type -b node_modules/tailwindcss
```
- **Generate exact variants**
**Will generate exact variants instead of soft variants.** But slowdown typescript language server, if you use it directly. (Importing subtype will be fine.)
```bash
npx create-tailwind-type -S
```
- **Change output filename**
**Will generate types in `src/types/tailwind.d.ts` file.**
```bash
npx create-tailwind-type -f src/types/tailwind.d.ts
```
### CLI Options
> [!NOTE]
>
> Check out for more details about the CLI options in [this documentation](./packages/create-tailwind-type/README.md).
| Option (Short) | Option (Long) | Description | Default Value |
| -------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `-b` | `--base ` | Specifies the base directory for @tailwindcss/node package. If omitted, the tool automatically resolves to the installed `@tailwindcss` package directory. | _None_ (auto-resolved) |
| `-f` | `--filename ` | Sets the output filename for the generated types. | `tailwind.ts` |
| `-d` | `--docs` | Enables documentation comments in the generated types. Use the inverse flag to disable them. | `true` |
| `-D` | `--no-docs` | Disables documentation comments in the generated types. | N/A |
| `-a` | `--arbitrary-value` | Allows the generation of arbitrary values in the output types. Use the inverse flag to disable this feature. | `true` |
| `-A` | `--no-arbitrary-value` | Disables arbitrary value generation. | N/A |
| `-s` | `--soft-variants` | Enables soft variant generation. When disabled (using the inverse flag), the tool will generate exact variants instead. | `true` |
| `-S` | `--no-soft-variants` | Disables soft variant generation (resulting in exact variant generation). | N/A |
| `-k` | `--string-kind-variants-only` | Limits the generated types to only string kind variants. | `false` |
| `-o` | `--optional-property` | Generates optional properties in the output types, which can be useful for partial configurations. | `false` |
| `-N` | `--disable-variants` | Disable variant generation and types, can be increase performance. | `false` |
| N/A | `--version` | Displays the current CLI version. | N/A |
| N/A | `--help` | Displays help and usage information for the CLI tool. | N/A |