Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danpacho/tailwindest
Write typesafe, reusable tailwind classnameđź”®
https://github.com/danpacho/tailwindest
classname-variants tailwind tailwind-typescript typesafe-tailwind typescript
Last synced: 3 days ago
JSON representation
Write typesafe, reusable tailwind classnameđź”®
- 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: 2024-12-15T16:29:06.000Z (10 days ago)
- Last Synced: 2024-12-15T18:08:49.773Z (10 days ago)
- Topics: classname-variants, tailwind, tailwind-typescript, typesafe-tailwind, typescript
- Language: TypeScript
- Homepage: https://tailwindest.vercel.app
- Size: 29.2 MB
- Stars: 136
- Watchers: 2
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
## Write tailwind with confidence
1. **Type-safe** `tailwind`
2. Provide **full type definition** of `tailwind` properties
3. **Solid conditional styling**, inspired by `cva`
## Useful features
- Support **all JS-frameworks**
- **Zero dependencies**
- `768B`, **tiny bundle size**
- **Support custom type**, defined in `tailwind.config.js`
- `tailwind` **doc site link** embedded
## Start with docs
**[Let's dive in 🏄‍♂️](https://tailwindest.vercel.app)**
## Recipes
### 0. Install package
```bash
npm i tailwindest
```
### 1. Define styling tools
```ts
import { createTools, type Tailwindest } from "tailwindest"
// name it whatever you want
export const tw = createTools()
```
### 2. Use styling tools
#### A. Basic style
Define basic style sheet with `style`.
```tsx
const box = tw.style({
display: "flex",
alignItems: "items-center",
justifyContent: "justify-center",
paddingX: "px-[2.25px]",
paddingY: "py-1",
":hover": {
opacity: "hover:opacity-90",
},
"@sm": {
paddingX: "sm:px-[4.5px]",
paddingY: "sm:py-2",
},
})
const Box = ({ children }) =>
{children}
```
#### B. Toggling
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}
}
```
#### C. Various conditions
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({
default: {},
success: {},
warning: {},
base: {}, // [optional] base style
})
interface BtnProps {
onClick: () => void
children: ReactNode
type?: GetVariants
}
const Btn = ({ onClick, children, type = "default" }: BtnProps) => (
{children}
)
```
#### D. [Variants](https://stitches.dev/docs/variants)
```tsx
const btn = tw.variants({
variants: {
type: {
default: {},
success: {},
warning: {},
},
size: {
sm: {},
md: {},
lg: {},
},
border: {
true: {},
false: {},
},
},
base: {}, // [optional] base style
})
interface BtnProps extends GetVariants {
onClick: () => void
children: ReactNode
}
const Btn = ({
children,
size = "md",
type = "default",
border = true,
onClick,
}: BtnProps) => (
{children}
)
```
#### E. Merging styles
Use `mergeProps` to **merge multiple styles** and **make prop-injectable universal components**.
```tsx
const text = tw.style({
// text base style
})
interface TextProps {
color?: Tailwindest["color"]
fontWeight?: Tailwindest["fontWeight"]
}
export const UniversalText = ({
children,
...textOptions
}: React.PropsWithChildren) => (
{children}
)
const SomeComponent = () => (
<>
color: red-100 & fontWeight: font-medium
color: blue-300 & fontWeight: font-bold
>
)
```
## LICENSE
MIT