CODEWITHSUNDEEP
cssnext.jstailwind-css
Risan
Risan

Reputation: 38

Tailwind classes on HTML don't work while those from the CSS file work

So, if the classes work as expected the page is supposed to look like this:

enter image description here

But instead, it looks like this:

enter image description here

This is the code in the jsx file:

                <header
                    className={"p-2 bg-red-500"}
                >
                    <h1>{postData.title}</h1>
                    <p>{postData.date}</p>
                    <img
                        src={formatImgSrc(postData.thumbnail)}
                    />
                </header>
                <div
                    className={"cms-content"}
                    dangerouslySetInnerHTML={
                        { __html: postData.contentHtml }
                    }>
                </div>

And here's the css file in /styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

.cms-content > p {
    @apply mt-6 bg-red-500;
}

As you can see, the classes that I put on HTML don't get applied while those from the CSS file work just fine. I really don't understand why.

Here are more files for reference.

next.config.js

module.exports = {
    webpack: (cfg) => {
        cfg.module.rules.push(
            {
                test: /\.md$/,
                loader: 'frontmatter-markdown-loader',
                options: { mode: ['react-component'] }
            }
        )
        return cfg;
    }
}

postcss.config.js

module.exports = {
  plugins: {
    "@tailwindcss/jit": {},
    autoprefixer: {},
  }
}

tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 1

Views: 2237

Answers (2)

Will Penman
Will Penman

Reputation: 33

Try moving the .cms-content class above the @tailwind utilities import. Those imports go in order and you might be overriding your utilities. See this tailwind tutorial on creating your own classes: https://youtu.be/TrftauE2Vyk?t=127

Upvotes: 1

Kickster
Kickster

Reputation: 1

add your folder this:

module.exports = {
  purge: [
   './pages/**/*.{js,ts,jsx,tsx}', 
   './your_folder/**/*.{js,ts,jsx,tsx}',
   './components/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 0

Related Questions