PostCSS Configuration
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};
Global CSS Styles
.form-control {
@apply w-full px-3;
& p {
@apply mb-1;
}
& input:not([type="checkbox"]),
& select,
& option,
& textarea {
@apply placeholder-gray-500 dark:placeholder-gray-text focus:outline-none focus:border-2 focus:border-brand-100 bg-bg-light-100 dark:bg-bg-dark-100 p-1 px-3 h-9 shadow-md;
}
& textarea {
@apply h-24;
}
&.error {
& input {
&:not([type="checkbox"]) {
@apply border-red-600 outline-none border-2;
}
}
}
}
The postcss-import plugin is functioning properly, but I'm experiencing issues with the nesting plugins not rendering my styles. Just a note, I am currently using Next.js.