Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – Issues with breakpoints in Tailwind

Alright this is a weird one. I’ve read through multiple other questions relating to this but nothing seems to work to fix it. Tailwind is working fine except for breakpoints.

I have this in the head

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

This is my tailwind.config (I even tried this with custom breakpoints added in here, still didn’t work)

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./*.{html,js}"],
    theme: {
        extend: {
            colors: {
                "marine-blue": "hsl(213, 96%, 18%)",
                "purplish-blue": "hsl(243, 100%, 62%)",
                "pastel-blue": "hsl(228, 100%, 84%)",
                "light-blue": "hsl(206, 94%, 87%)",
                "strawberry-red": "hsl(354, 84%, 57%)",
                "cool-gray": "hsl(231, 11%, 63%)",
                "light-gray": "hsl(229, 24%, 87%)",
                "magnolia": "hsl(217, 100%, 97%)",
                "alabaster": "hsl(231, 100%, 99%)",
                "white": "hsl(0, 0%, 100%)",
            },
            fontFamily: {
                ubuntu: ["Ubuntu", "sans-serif"],
            },
        },
    },
    plugins: [],
};

This is the base code, it works fine

 <div class="container w-full relative z-10">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

Now I can add in a hidden class and that works as well, the div disappears like expected

 <div class="container w-full relative z-10 hidden">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

This is where it stops working

 <div class="container w-full relative z-10 sm:hidden">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

This also doesn’t work (div stays hidden and never switches to block)

  <div class="container w-full relative z-10 hidden md:block">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

Doesn’t matter how I resize the browser/responsive window in chrome inspector, I can add xs:block sm:hidden, etc. the breakpoint code just does not work. Adding in any of the breakpoint tags (xs, sm, md, lg, xl) is not being executed for some reason. I can drop the breakpoint tag and it works fine though.

I’ve closed and reopened VC Code, restarted the –watch function for tailwind, tried this in both Chrome and Firefox, breakpoints just aren’t working.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Completely removing Tailwind and deleting all files and code relating to Tailwind and then reinstalling it fixed the issue. No idea what actually caused it. Before removing Tailwind, I made an entirely new index.html and css files and double checked all the links and code, Tailwind still didn't work correctly until fully removing and reinstalling it.


  2. 0

    I truly understand your plight and I’ll explain how tailwind breakpoints work in simple terms.

    we have a couple of breakpoints:
    xs sm md lg xl etc.

    Manually add the breakpoints to tailwind.config.js

    module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
  },
};

    Example

    <p class="text-md xs:text-lg sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"> 
  Hello
</p>

    In the above codeblock, we want to scale the size of Hello when each breakpoint hits. Also, notice that at the beginning of the utility classes we have text-md which serves as the default font size when we hit below xs.

    To use this in your application and solve your current bug, you need to specify at what breakpoint you intend to display the div.

    For instance, the below codeblock shows that the image will be hidden until the xl breakpoint is reached. It won’t show on anything below xl

    class="hidden xl:block"

    The Solution

     <div class="container w-full relative z-10 hidden xl:block">
       <img
          src="assets/images/bg-sidebar-mobile.svg"
          alt="sidebar image"
          class="absolute w-full z-10 max-h-[180px]"
        />
 </div>
    Login or Signup to reply.
  3. 0

    I followed the documentation instructions for Tailwind CLI for a simple project with the default config and it worked. You can see the example in this repo on my github. I suggest you clone the repo and follow the project instructions to see it in action.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search