Tailwind allows you to create custom "components" in its config via plugins.
Here's a hack to define your typography as tailwind components, using Tailwind utilities:
// tailwind.config.ts
import plugin from 'tailwindcss/plugin';
export default {
// ...the rest of your config
plugins: [
plugin(({ addComponents }) => {
addComponents({
".typography-h1": {
"@apply text-[2rem] lg:text-[2.5rem]": "",
},
".typography-h2": {
"@apply text-[1.5rem] lg:text-[2rem]": "",
},
// ...rest of your typography
});
}),
],
};
Now you can use these components to style your markup, and you'll also receive autocomplete:
Top comments (1)
Thanks for sharing