最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

gatsby - Why are some tailwind classes working on my gatsbyjs site but then others aren't? - Stack Overflow

programmeradmin1浏览0评论

I've used classes like bg-cyan-500 without issue, but bg-cyan-100 doesn't work as expected, nor does the uppercase class. I've tried multiple adjustments to my PostCSS, gatsby-config, and Tailwind config files. I don't have any overwriting rules, but I see that the class is being added to the HTML, yet nothing shows in my CSS.

tailwind.config:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,mdx}", // make sure this matches your file structure
  ],
  theme: {
    extend: {},
  },
  corePlugins: {
    textTransform: true,  // Explicitly enable textTransform utilities
  },
  plugins: [],
}

postcss.config:

module.exports = {
  plugins: [
    "tailwindcss",
    "autoprefixer",
  ],
}

gatsby-config:

/**
 * @type {import('gatsby').GatsbyConfig}
 */
 module.exports = {
  siteMetadata: {
    title: "The Shark Fighter",
  },
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-postcss",
    
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `portfolio`,
        path: `${__dirname}/portfolio/`, // Ensure this matches your folder structure
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-react-svg`,
      options: {
        rule: {
          include: /src\/images\/svg/,
        },
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              withWebp: true,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },    
  ],
};

Here is a link to the git for all of the code:

I've kind of exhausted everything I can think of trying to get this to work, I could use normal CSS styling but I'd like to use the code provided by tailwind.

发布评论

评论列表(0)

  1. 暂无评论