Tailwind CSS v4 dramatically reshapes plugin configuration, particularly for the Typography plugin. This guide cuts through the complexity.
// Old way (v3.x)
module.exports = {
plugins: [
require("@tailwindcss/typography"),
],
}
/* New method (v4.x) */
@import "tailwindcss";
@plugin '@tailwindcss/typography';
require('@tailwindcss/typography')
from config@plugin '@tailwindcss/typography';
to main CSS filetheme: {
extend: {
typography: theme => ({
DEFAULT: {
css: {
color: theme("colors.gray.700"),
a: {
color: theme("colors.blue.500"),
},
},
},
}),
},
}
@theme {
--typography-default-color: theme(colors.gray.700);
--typography-default-a-color: theme(colors.blue.500);
}
theme.extend.typography
# Confirm removal from config
grep -v "require('@tailwindcss/typography')" tailwind.config.js
# Verify CSS file update
cat globals.css | grep "@plugin '@tailwindcss/typography'"
require()
calls will break buildstailwind.config.js
@plugin
directive to main CSSMigrations are never zero-effort, but Tailwind’s v4 changes streamline future plugin integrations.