I've encountered some issues in my nextJS app with utilizing certain TailwindCSS classes such as top, left, or drop-shadow.
Even after attempting to update Tailwind from version 1.9.5 to 3.3.3, I have not seen any changes.
I believe that I am importing it correctly:
@tailwind base;
@tailwind components;
@tailwind utilities;
Here is my configuration, although the problems I am facing do not involve custom classes:
const { colors } = require(`tailwindcss/defaultTheme`)
module.exports = {
purge: {
enabled: false,
content: ["./components/**/*.js", "./pages/**/*.js"],
},
theme: {
extend: {
colors: {
primary: colors.indigo,
brique: "#cd391a",
slate: "rgb(71, 71, 71)",
blueBus: "#111635",
deepBlue: "#340978",
// "#1400FF",
brightYellow: "#6BAA75",
// "#FBE200",
darkPurple: "#ffffff",
// "#300729",
},
fontFamily: {
display: ["Rubik"],
titleFont: ["Concert One", "sans serif"],
},
container: {
center: true,
padding: {
default: "1rem",
md: "2rem",
},
},
gridTemplateColumns: {
// custom grid col for cards
cards: "repeat(3, 10rem)",
},
height: {
container: "calc(100vh - 256px)",
canvasWrapper: "75vh",
},
},
},
}
I'm unsure of what else to investigate to debug this issue.
EDIT: To provide more context, I am using these classes in this manner, for example:
<h5 className="drag-indicator absolute left-1/2 top-1/2 text-center text-3xl font-bold text-purple-500 z-10 opacity-75 drop-shadow-xl">
← Click & drag to rotate →
</h5>
In terms of folder structure, I have a styles folder containing two files: one being index.css solely with the TailwindCSS imports and the other global.scss with some styling for a component reused from a previous application. Could this potentially be causing the problem?