How to modify .container css class breakpoint for Tailwind CSS library using tailwind.config.js

Question

According to the below screenshot picture, Tailwind css library offer 6 breakpoints for default, sm, md, lg, xl, 2xl screen sizes.

I want two breakpoints. by default the .container css class will have 100% width and then when the screen size is more then 1280px, the width will be fixed 1280px.

I can create css rule in my css file, however, since Tailwind offer tailwind.config.js file to change styles, I want to do it from the js file.

How can I set responsive breakpoints for .container css class using tailwind.config.js file?

Cem Karakurt · Answer 1 · 2022-01-08T15:03:39.823

2

You can override break points =>

Related doc = https://tailwindcss.com/docs/screens

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

Note: Upper code will affect the entire breakpoints.

If you want to just change the container, I think the below link will help you. https://stackoverflow.com/a/67915435/7775650

edited Jan 08 '22 at 15:03

answered Jan 08 '22 at 14:34

Cem Karakurt

241
3
5

I don't want to override entire break points, i need to skip few break points for container css class. – Shah Alom Jan 08 '22 at 14:56
@ShahAlom I updated my answer. Please check the link I shared on my answer. – Cem Karakurt Jan 08 '22 at 15:05
thank you. it fixed my problem. – Shah Alom Jan 08 '22 at 15:14

score 0 · Answer 2 · answered Jan 09 '22 at 12:22

Got the solution from: https://stackoverflow.com/a/67915435/7775650 as mentioned by @cem-karakurt in previous answer.

// tailwind.config.js
module.exports = {
  ...

  theme: {
    container: {
      ...

      screens: {
        xl: '1240px',
      },
    },
  },
  
  ...
}

How to modify .container css class breakpoint for Tailwind CSS library using tailwind.config.js

2 Answers2