Question 405690 in CSS Question posted in
Some basic documentation can be found here.

Css – Tailwind styles don't load well when working on a React project for a long time

I’m working on a React application, using Tailwind for styling. This issue happens when I’ve been developing for a while. For example, I add a container with hover:bg-red-900, and it works at first, but for some reason, that specific style stops working. Then if I change it from 900 to 800, it works fine, but if I switch back to 900, it gets ‘stuck’ in the error.

I’m not sure if the problem is related to caching, memory, or something else. But it’s frustrating, and it doesn’t let me continue comfortably.

To fix the error, I have to use inline styles or create a .css file… When it really shouldn’t be necessary.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay, apparently I found my mistake, and it wasn't directly an issue with Tailwind, caching, or memory, but with state management.

    To show certain styles conditionally, I was using calculations inside the Template String, and I changed it to state, which is calculated in a useEffect. Now the behavior is as expected.

    Thanks!


  2. 0

    Apply path in tailwind config file.

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content:{
    relative: true, 
    files: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./layout/**/*.{js,ts,jsx,tsx,mdx}", ==> I am using outside component So when I add path it working.
 
  ],},
  theme: {
    extend: {},
  },
  plugins: [],
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search