在我的nextJS应用程序中,我在使用一些TailwindCSS类(如top,left或drop-shadow)时遇到了问题。
我尝试将Tailwind从1.9.5更新到3.3.3,但没有任何更改
我想我是正确导入的:
@tailwind base;
@tailwind components;
@tailwind utilities;
这里是我的配置,即使我的问题不涉及自定义类:
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",
},
},
},
}
我不知道还能查什么来调试
编辑:为了获得更多信息,我使用这些类来实现:
<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>
关于文件夹结构,我有一个包含两个文件的styles文件夹:一个是index.css,其中只有TailwindCSS导入,另一个是global.scss,其中有一些样式,用于从以前的应用程序中重用的组件。这会是问题的根源吗?
1条答案
按热度按时间vi4fp9gy1#
尝试在tailwind.js.js中手动添加shadow属性,就像extend中的这样:boxShadow:{ dark:“8 px 6px 24 px 0 px rgba(107,103,107,0.59)",},然后你可以看到你的问题的目的