Trouble with custom breakpoints in Tailwind CSS - not behaving as expected

I added a custom breakpoint ('mymd': '962px') and now the breakpoints with lower widths are not functioning properly

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'mymd': '962px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

html

<div class="sm:bg-red-900 
            md:bg-yellow-900 
            mymd:bg-gray-900 
            lg:bg-green-900 
            xl:bg-blue-900 
            2xl:bg-indigo-900 
            h-screen w-full">
The 2xl, xl, lg, and mymd breakpoints are working fine, but md and sm are not

img - https://ibb.co/D4x3vF8

csstailwind-css

Answer №1

I attempted to insert a new breakpoint alongside the default one, however I managed to achieve this

theme

const defaultTheme = require('tailwindcss/defaulttheme');

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'xs': '425px',
      ...defaultTheme.screens,
    },
    extend: {
      screens: {
        '3xl': '1920px',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

HTML

<div class="sm:bg-red-900
            lg:bg-green-900
            3xl:bg-indigo-900
            h-screen w-full">
</div>

Answer №2

Give it a try with this extension:

theme: {
 screens: {
   'sm': '640px',
   'md': '768px',
   'lg': '1024px',
   'xl': '1280px',
   '2xl': '1536px',
  },
  extend: {
    screens: {
      'mymd': '962px'
    }
  },
},

Update:

Everything seems to be working smoothly - test it out on this sandbox You can see the final result by clicking here

Answer №3

By arranging and creating the screens in an increasing sequence, I was able to resolve the issue

theme: {
container: {
  center: true,
  padding: "2rem",
  screens: {
    "2xl": "1400px",
  },
},
extend: {
  screens: {
    "xs" : "376px",
  },

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

Is it possible to locate an element using two attributes in C# WebDriver?

Can anyone assist me in finding elements based on their class and the text they contain? I have attempted the following methods without success, so any guidance would be greatly appreciated (I prefer using CSS for selection, but XPath is also acceptable): ...

c#cssseleniumxpath

Adjusting the height of a table cell in Material Design Lite

I have been trying to adjust the height of a td element using material design lite and applying mdl-data-table__cell--non-numeric. Despite adding height:20px directly to the selector in material.min.css file, I did not see any change. .mdl-data-table__cel ...

cssmaterial-design

Obtain the in-flow position of a DOM element

alert("Incorrect (red): " + document.getElementById("target").getBoundingClientRect().top); alert("Proper (blue): " + document.getElementById("wrapper").getBoundingClientRect().top); #target { transform: translate(20px, -20px) rotateZ(20deg); backgroun ...

javascriptjquerycsspositiontransform

I'm having trouble with the pull-right feature in Bootstrap -

I am having trouble with the bootstrap class pull-right. Despite applying it, my span is still floating to the left. I am unsure why the pull-right class is not functioning as expected. <!DOCTYPE html> <html lang="cs"> <head> <me ...

htmlcssbootstrap-4

Google Bar Graphs Cannot Display Decimal Values

Having an issue with my bar chart from Google Chart not displaying float numbers. Other types of bar charts provided by Google Chart work fine, but this specific type doesn't show the float numbers. Here is the code I have written: http://jsfiddle.ne ...

javascriptcsscharts

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

javascriptjquerycss

Unable to modify the background in bootstrap

I'm having trouble changing the background color or image on my website. Despite everything looking correct in my CSS, the background color just won't show. HTML: <!DOCTYPE html> <html lang="en"> <head> <!-- MET ...

htmlcsstwitter-bootstrap

I seem to be having trouble properly sizing the width of my forms in Mui React

Having trouble with the sizing of my tabs in a project I'm working on. The first tab displays ingredients, while the second tab allows for adding new ingredients with various forms. However, when selecting different forms, the width of the form contai ...

cssreactjsmaterial-uistyles

Switching over to styled components from plain CSS using a ternary operator

Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've ...

javascriptcssreactjsmaterial-uistyled-components

What is preventing me from getting this straightforward CSS transition to function properly?

I'm really struggling with CSS transitions and trying to figure out why my transition for the div class=text is not working as expected. const menuToggle = document.querySelector('.toggle') const showCase = document.querySelector('.s ...

javascripthtmlcss

Using jQuery to locate text and apply a specific class

Explaining My HTML Structure: <div id="test-listing"> <article> <a>Some URL</a><h3>Some Text</h3> <p>Drink this coffee</p> </article> <article><a>Some URL</a><h3>Some Text</h ...

jquerycssreplace

The InfoWindow in Google Maps occasionally displays an unexpected scrollbar that appears briefly

My InfoWindows are not displaying correctly, as they show a scrollbar when they shouldn't (only on the first time)! I have multiple polyline routes on my page and I am adding a marker/InfoWindow for each route. This results in several markers being a ...

jquerycssgoogle-mapsgoogle-maps-api-3google-maps-markers

How to organize elements in groups of three using HTML and PHP

Hey there, I'm currently working on aligning items in rows of 3. Each row should start with a div called "". The main idea is to open a new div after every 3 items and close the previous one. I've tried the code below but unfortunately, it' ...

phphtmlcss

Tips on attaching a class to elements in a loop when a click event occurs

In my HTML, I am displaying information boxes from an array of objects that are selectable. To achieve this, I bind a class on the click event. However, since I am retrieving the elements through a v-for loop, when I select one box, the class gets bound to ...

javascriptcssclassvue.js

Guide to implementing a radial gradient using CSS on a cairo surface in gtk4

I am attempting to create a circular shape on a Gtk4 GtkDrawingarea using CSS. The goal is to then save the circle as a PNG file upon clicking on it. However, I am encountering difficulties in transferring the drawing (gradient) from the drawing area to a ...

cssccairogtk4

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...

javascriptjquerycss

Implementing jcarousel feature for showcasing the newest products on OpenCart

Currently, I am delving into the world of Opencart and attempting to create my latest product display using jCarousel. The version of Opencart I am working with is 1.5.4. Despite following the steps outlined in this tutorial , I have encountered difficult ...

javascriptjquerycssjcarouselopencart

Scrolling left and right, text floats atop the image

Trying to implement a rollover effect image using CSS. The initial state shows only the title, but upon hovering, a text overlay appears. Everything seems to be working well except that the text area extends off to the right. Also, there is scrolling up an ...

htmlcssimagetextrollover

Looking to apply CSS selectors with variables to target all TD elements within a specific table?

Looking to apply CSS properties to all td IDs for rows in a table? Instead of individually targeting each ID like this: .idName1, idName2, idName3, idName4, idName5 {background-color: ##4CAF50;} You can simplify the process by using a PHP variable to ind ...

phpcss

Increase the distance between input boxes using CSS styling

I'm encountering an issue with adding spacing between input boxes, despite attempting to use padding. The padding only seems to move the boxes instead of creating space between them. Here is my code: ...

htmlcss