Some tailwind classes don't work in chrome inspect

Question

I'm trying to develop the front end of my project using tailwindcss through the Chrome Inspect Tool. But the issue I'm facing is that some classes don't really apply in chrome inspect. I understand that there might be a compilation issue as these classes might not have been used earlier, so the dev tool isn't recognizing those classes. But I believe there must be a smart solution for this problem as it might help a long way for frontend development.

Note: I've added my code as well, but it seems to be a generic issue faced while designing the frontend in the Chrome Inspect Tool. This is my tailwind.config.js:

const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  content: ["./src/***/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

And here is the component code:

import logo from "../../assets/icons/logo.svg";

function Footer() {
  return (
    <div className="flex flex-col">
      <div className="flex bg-[#00D4B5]">
        <div className="">
        <img src={logo} alt="Logo" />
          <p>The Driveli Promise</p>
        </div>
        <p>We want to make learning to drive stress-free from beginning to end. That’s why we take care of scheduling, payments, and everything else in between. You just need to keep your eyes on the road!</p>
      </div>

      <div className="flex">
        <div className="flex flex-col">
          <p>COMPANY</p>
          <ul>
            <li>About Us</li>
            <li>Contact</li>
            <li>Terms of Service</li>
            <li>Privacy Policy</li>
            <li>FAQ </li>
            <li>Blog</li>
          </ul>
        </div>

        <div className="flex flex-col">
          <p>LEARNERS</p>
          <ul>
            <li>How it works</li>
            <li>Referrals</li>
            <li>Learner’s Journey</li>
            <li>Learning to drive</li>
          </ul>
        </div>

        <div className="flex flex-col">
          <p>INSTRUCTORS</p>
          <ul>
            <li>Driving Instructor </li>
            <li> How it works</li>
            <li>Referrals</li>
          </ul>
        </div>

        <div className="flex flex-col">
          <p>INSTRUCTORS</p>
          <ul>
            <li>Driving Instructor</li>
            <li>How it works</li>
            <li>Referrals</li>
          </ul>
        </div>

        <div className="flex flex-col">
          <img src=""></img>
          <img src=""></img>
          <img src=""></img>
          <img src=""></img>
        </div>
      </div>

      <div className="flex justify-between">
        <p>© 2022 Driveli.co.uk All rights reserved.</p>

        <div className="flex">
          <img src=""></img>
          <img src=""></img>
          <img src=""></img>
          <img src=""></img>
          <img src=""></img>
        </div>
      </div>
    </div>
  );
}
export default Footer;

you need to share your config and code if you want some help — Johan, Mar 07 '23 at 08:54
I've edited my question, please review it again, but it's a generic issue, I guess. — Fuaad, Mar 07 '23 at 12:31
what did you use to create your project ? `npx create-react-app` ? — Johan, Mar 07 '23 at 13:06
yes, but this issue comes across even when working in some other platform as well. — Fuaad, Mar 08 '23 at 01:54
Its means that you didn't setup tailwind correctly. What steps did you follow ? — Johan, Mar 08 '23 at 07:24

score 0 · Answer 1 · answered Mar 07 '23 at 13:55

It is probably as you said because those classes weren't used earlier.

You can try to safelist those classes in your tailwind.config, and if this was the case, then the classes will appear

//tailwind.config.js

const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  safelist: [
    'bg-[#00D4B5]',
  ],
....

Adding any class in the safelist ensures that this class gets rendered

Some tailwind classes don't work in chrome inspect

1 Answers1