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.