The challenges of utilizing breakpoints effectively within Tailwind CSS

So here's the issue. I've gone through various other queries related to this problem but haven't found a solution yet. Tailwind seems to be functioning well except for breakpoints.

This is what I have in the head

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

And here's my tailwind.config (even tried adding custom breakpoints, still no luck)

/** @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: [],
};

The base code 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>

Adding a hidden class also works as 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>

But when trying to use breakpoints like sm:hidden, it doesn't work

 <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>

The breakpoint tags just don't seem to execute properly

  <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>

Regardless of how I resize the browser or use Chrome inspector, the xs, sm, md, lg, xl breakpoints simply do not work. Removing the breakpoints works fine though.

I've tried closing and reopening VS Code, restarting the --watch command for Tailwind, tested in both Chrome and Firefox, but the breakpoints continue to malfunction.

htmlcsstailwind-cssbreakpoints

Answer №1

I completely empathize with your situation and I will simplify the concept of tailwind breakpoints for you.

Let's take a look at the different breakpoints available: xs, sm, md, lg, xl, etc.

To incorporate these breakpoints, manually insert them into your tailwind.config.js file:

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

For Example

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

In the code snippet above, we are adjusting the font size of Hello when each breakpoint is reached. Additionally, note that text-md is used as the default font size before reaching xs.

To implement this in your project and address the current issue, specify the breakpoint at which you want the content to be displayed.

For example, the following code segment indicates that an image will only appear once the xl breakpoint is reached, remaining hidden on anything below xl:

class="hidden xl:block"

The Resolution

 <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>

Answer №2

After completely eliminating Tailwind from the project and erasing all traces of its files and code, a reinstallation successfully resolved the issue at hand. The exact cause behind the malfunction remains unknown. Despite creating fresh index.html and CSS files while meticulously verifying all links and code beforehand, Tailwind failed to operate properly until undergoing a complete removal and reinstallation process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

javascripthtmlcss

Adjust positioning of navigation when hovered over

Need help creating a cool navigation effect like this. Live example: https://hookandbarrelrestaurant.com/ Here is my code: https://codepen.io/Dhaval182/pen/rQPMoW ...

javascriptjqueryhtmlcss

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Contrasts in characteristics of CSS images versus SVG graphics

I'm curious if there are distinctions between CSS images and SVGs on your website. When referencing CSS images, I mean images constructed with div elements in HTML and then styled using CSS (such as this: https://codepen.io/andrewrock/pen/jOEZxrY). ...

htmlcssperformancesvgdifference

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

I am having difficulties invoking jQuery functions within an "asp:UpdatePanel". Despite the code provided below, my attempts to add a class to the div element ".popup-body" are unsuccessful. Interestingly, the "alert();" function works without any issues. ...

javascriptjqueryhtmlasp.net

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

I am looking to ensure that an <img> has the smallest possible size without any empty spaces inside a div, while also being perfectly centered both horizontally and vertically. The image size may vary. To better illustrate, here is an example: http: ...

javascriptjqueryhtmlcss

Activate a button with jQuery when a key is pressed

Currently, I have two buttons set up with jQuery: $('#prev').click(function() { // code for previous button }); $('#next').click(function() { // code for next button }); My goal now is to implement a .keypress() handler on the ...

javascriptjqueryhtml

The CSS will dynamically adjust the width of the DIVs based on the browser size, allowing for more DIVs per

I am currently designing a layout to showcase content blocks side by side in a manner that fills the browser window with DIV blocks. I recall stumbling upon a CSS-only technique that automatically adjusts the width of each DIV based on the size of the bro ...

htmlcsslistlayout

Issue with custom font display malfunction

I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here? <style> .stonefont @font-face { font-fa ...

htmlcssfont-face

Angular Material Toolbar Experiencing Color Distortion

To see the issue in action, check out this CodePen: An ongoing problem I've encountered with Angular Material involves distorted colors on the toolbar. The edges of the toolbar display one shade of green, while the middle shows a different shade. Tak ...

javascripthtmlangularjsangular-material

What is causing the failure of generating a DIV element with JQuery?

I'm having trouble creating a div element with a class and appending a child to it. I keep getting no response. What could be the issue? JS content function generateTable() { var procDiv = $("<div class='proc-container'></div>" ...

jqueryhtml

Tips for navigating through a div with an unknown height

I am currently working on developing a sleek messaging system and I have encountered an issue with the interface design. My project is built using Materialize, however, I am open to tweaking it with custom CSS if necessary. The layout consists of a list of ...

cssuser-interfacematerialize

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

Being new to Bootstrap, I have taken the time to explore What is Bootstrap? as well as http://getbootstrap.com/. From what I understand so far, Bootstrap is a CSS framework that aids in creating responsive designs that can adapt to various devices. Essent ...

javascripthtmlcsstwitter-bootstrap

When a user clicks on a button, AJAX and jQuery work together to initiate a setInterval function that continually

Currently, I have two scripts in place. The first script is responsible for fetching a specific set of child nodes from an XML file through AJAX and using them to create a menu displayed as a list of buttons within #loadMe. What's remarkable about thi ...

javascriptjqueryhtmlajax

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

jqueryhtmlcsstwitter-bootstrap

Gradually blend the section of the picture with an image banner after 20 seconds

I have a background image that rotates every 20 seconds, fading in and out. The images consist of a logo at the top-left corner and a person image at the right side from top to bottom. However, I want only the person image to fade in and out while keeping ...

jqueryhtmlcssslideshowfade

Mistake made by the author while using the Google Structured Data Test

While reviewing my website, I encountered an error message stating: "Missing required hCard "author"" http://www.google.com/webmasters/tools/richsnippets?q=http%3A%2F%2Fwww.gamempire.it%2Fcastlestorm-ps-vita%2Frecensione%2F131419 Why is this happening? I ...

htmlmicrodatagoogle-search-consolemicroformatsrich-snippets

Unresponsive Radio Buttons in HTML

Have you ever encountered the issue where you can't seem to select radio buttons despite them having a confirmed name attribute? Here is an example of the HTML code: <div id="surveys-list" class="inline col-xs-12"><div> <div class="i ...

javascriptjqueryhtmlcssradio-button

The Youtube Subscribe Embed feature is causing my image to lose its corners

When I use the official embed code from Google Developers to embed my YouTube channel, it cuts off the corners of my image and leaves white corners. This doesn't look good on my website with a black background. <script src="https://apis.google ...

htmlcsswordpressembedstyling