My first time using tailwind has resulted in slow compilation times when used with nextjs in development mode.
The slowdown can be confirmed by simply removing the following code:
@tailwind base;
@tailwind components;
@tailwind utilities;
This significantly reduces the compilation time. I've attempted to improve the performance by utilizing jit and splitting the CSS file, but unfortunately, these solutions have not worked for me. How can I resolve this issue?
https://i.sstatic.net/HLHWG.png
https://i.sstatic.net/CBl67.png
/** @type {import('tailwindcss').Config} */
const { shake } = require("./app/global/configStore/tailwind/animations");
module.exports = {
mode: "jit",
theme: {
extend: {
keyframes: {
shake: { ...shake },
},
animation: {
"error-shake": "shake 0.5s linear",
},
},
},
content: [
"./public/*.html",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./app/components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
safelist: [
{
pattern: /(bg|text|border)-./,
},
],
options: {},
plugins: [],
};
I haven't made any configurations in the postcss.config.js file and I start my server using yarn run dev. Any assistance would be greatly appreciated. Thank you!