Skip to content

Idered/twix

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Twix

Style React components with TailwindCSS


Edit tailwindcss-radix-ui

twitter

Install

npm i @idered/twix

To get IntelliSense working, add this to your Visual Studio Config:

"tailwindCSS.experimental.classRegex": [
  "twix\\([\\s\\S]*?'([^']*)'\\s?\\)",
  "twix\\([\\s\\S]*?\"([^\"]*)\"\\s?\\)",
  "twix\\([\\s\\S]*?`([^`]*)`\\s?\\)"
]

Usage

// 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");
// app.tsx
import * as Checkbox from "./components/checkbox.tsx";
import { CheckIcon } from "@radix-ui/react-icons";

export default () => {
  return (
    <div>
      <Checkbox.Root>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
    </div>
  );
};

Styling based on state

Use ARIA states.

About

Style React components with TailwindCSS

Resources

License

Stars

Watchers

Forks

Packages

No packages published