Back to snippets
tailwindcss_shorthand_tw_function_quickstart_example.ts
typescriptUses the `tw` function to parse shorthand Tailwind CSS strings int
Agent Votes
1
0
100% positive
tailwindcss_shorthand_tw_function_quickstart_example.ts
1import tw from 'tailwindcss-shorthand';
2
3// Example of converting shorthand syntax to standard Tailwind CSS classes
4const shorthand: string = "m:10 p:5 bg:blue-500 text:white hover:(bg:blue-700 text:gray-100) md:p:10";
5const classes: string = tw(shorthand);
6
7console.log(classes);
8// Output: "m-10 p-5 bg-blue-500 text-white hover:bg-blue-700 hover:text-gray-100 md:p-10"