Customize
With tailwindest
v3, customization is simpler and more powerful. All your custom styles are defined in your tailwind.css
file, and create-tailwind-type
will generate the corresponding types.
The Workflow
Section titled “The Workflow”- Modify
tailwind.css
: Update your custom themes, colors, spacing, variants, etc., in your Tailwind configuration file. - Run
create-tailwind-type
: Executenpx create-tailwind-type
in your terminal. - Use your custom styles: The generator updates your
tailwind.ts
file, and your custom styles become available with full type safety in yourtw
tools.
There’s no need to manually define custom types with generics anymore!
Example: Adding Custom Colors
Section titled “Example: Adding Custom Colors”Let’s say you want to add custom brand colors to your project.
-
Update
tailwind.css
:@import "tailwindcss"; /* Custom colors */ @theme { --color-primary: #371a1a; --color-secondary: #682f2f; }
-
Generate types:
npx create-tailwind-type --base node_modules/tailwindcss --no-arbitrary-value --disable-variants
-
Use the custom colors:
Your
tw
tools are now aware of these new colors.import { tw } from "~/tw" const button = tw.style({ // --> Autocompletes to `bg-primary` and `bg-secondary` backgroundColor: "bg-primary", hover: { // --> Also works with variants backgroundColor: "hover:bg-secondary", }, })
Example: Custom Spacing and Screens
Section titled “Example: Custom Spacing and Screens”-
Update
tailwind.css
:@import "tailwindcss"; # Adding plugins @plugin 'tailwindcss-motion'; @plugin "@tailwindcss/typography"; @plugin 'tailwind-scrollbar'; # Adding variants @custom-variant dark (&:where(.dark, .dark *)); @custom-variant pointer (&:hover, &:focus-visible); # Adding custom properties @theme { --color-primary-light: #f8f8f8; --color-primary-dark: #151515; --color-secondary-light: #c4c4c4; --color-secondary-dark: #3b3b3b; --color-logo-red: #ff2f2f; --color-logo-blue: #4132e8; --font-platypi: "Platypi", "Nanum", "sans-serif"; --font-nanum: "Nanum", "Platypi", "sans-serif"; --animate-spin-ping: spin-ping 1s ease-in-out infinite; @keyframes spin-ping { 0% { transform: rotate(0deg); opacity: 1; } 50% { transform: rotate(180deg); opacity: 0; } 100% { transform: rotate(360deg); opacity: 1; } } # Write your own tailwindcss configuration using css }
-
Generate types:
npx create-tailwind-type --base node_modules/tailwindcss --no-arbitrary-value --disable-variants
-
Use the custom values:
import { tw } from "~/tw" const layout = tw.style({ animation: "spin-ping", // <-- `spin-ping` is fully-typed fontFamily: "Platypi", // <-- `Platypi` is fully-typed fontFamily: "Nanum", // <-- `Nanum` is fully-typed // <-- custom property is fully-typed color: 'text-primary-right', backgroundColor: 'bg-primary-right', // <-- custom plugins are fully-typed custom: ['motion-appear-sm',] // <-- unknown property name, cause complex CSS combination. // <-- custom variants are fully-typed pointer: { color: 'pointer:text-primary-right', backgroundColor: 'pointer:bg-primary-right', } })