https://github.com/idered/twix
Style React components with TailwindCSS
https://github.com/idered/twix
Last synced: about 1 year ago
JSON representation
Style React components with TailwindCSS
- Host: GitHub
- URL: https://github.com/idered/twix
- Owner: Idered
- License: mit
- Created: 2022-11-11T19:15:11.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-18T18:04:30.000Z (over 3 years ago)
- Last Synced: 2025-03-20T00:01:59.003Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 1.04 MB
- Stars: 95
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Twix
Style React components with TailwindCSS
## Install
```sh
npm i @idered/twix
```
To get IntelliSense working, add this to your Visual Studio Config:
```json
"tailwindCSS.experimental.classRegex": [
"twix\\([\\s\\S]*?'([^']*)'\\s?\\)",
"twix\\([\\s\\S]*?\"([^\"]*)\"\\s?\\)",
"twix\\([\\s\\S]*?`([^`]*)`\\s?\\)"
]
```
## Usage
```tsx
// components/checkbox.tsx
import { twix } from "@idered/twix";
import * as Checkbox from "@radix-ui/react-checkbox";
export const Root = twix(
Checkbox.Root,
"border border-slate-300 hover:border-slate-500 rounded w-8 h-8 flex items-center justify-center aria-checked:border-blue-500"
);
export const Indicator = twix(Checkbox.Indicator, "text-indigo-500");
```
```tsx
// app.tsx
import * as Checkbox from "./components/checkbox.tsx";
import { CheckIcon } from "@radix-ui/react-icons";
export default () => {
return (
);
};
```
## Styling based on state
Use [ARIA states](https://tailwindcss.com/docs/hover-focus-and-other-states#aria-states).