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

Tailwind custom breakpoints are overriding larger breakpoints – Ubuntu

I’m using the latest version of tailwind and I have a custom breakpoint, xs:, which is equal to 540px. When I use it like this: h-[420px] xs:h-[400px] xl:h-[360px] it works fine for mobile and the xs breakpoint, but the xl breakpoint no longer registers- the height is 400 even on desktop.

This is my config:

theme: {
    extend: {
      screens: {
      'xs': '540px',
      ...

Unfortunately, this works in the sandbox here and I’m not sure why it doesn’t work on my local. I’m using Sveltekit (a version before the breaking changes), Ubuntu Linux and Chrome.

Tags:

2

Answers


  1. 0

    Standard CSS3 give us to max and min values for responsive behaviors.

    But tailwind responsive behaviors set as default for only min size.
    what it mean ?

    if you add one more responsive behavior point…
    you must stop that ‘xs’ behaviors with sm:h-[360px] or md:h-[360px].
    if you don’t understand this answer, i can give you more details about it.

    But please add your code more with details.

    Login or Signup to reply.
  2. 0

    not sure which version of tailwind you’re using, probably a version number would help, but in the latest version of tailwind, you cant simply extend smaller breakpoints because the new breakpoint will be added at the end of the breakpoints list.

    If you want to add an additional small breakpoint, you can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.

    Instead, override the entire screens key, re-specifying the default
    breakpoints:

    const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: [],
}

    you can read more here : https://tailwindcss.com/docs/screens#adding-smaller-breakpoints

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

Back To Top
Search