TailwindCSS类在nextjs应用程序中不工作

brvekthn  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(125)

在我的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">
          &larr; Click & drag to rotate &rarr;
        </h5>

关于文件夹结构,我有一个包含两个文件的styles文件夹:一个是index.css,其中只有TailwindCSS导入,另一个是global.scss,其中有一些样式,用于从以前的应用程序中重用的组件。这会是问题的根源吗?

vi4fp9gy

vi4fp9gy1#

尝试在tailwind.js.js中手动添加shadow属性,就像extend中的这样:boxShadow:{ dark:“8 px 6px 24 px 0 px rgba(107,103,107,0.59)",},然后你可以看到你的问题的目的

相关问题