CODEWITHSUNDEEP
csstailwind-csstailwind-in-js
Shah Alom
Shah Alom

Reputation: 1055

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

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

enter image description here

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?

Upvotes: 3

Views: 4073

Answers (2)

Shah Alom
Shah Alom

Reputation: 1055

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',
      },
    },
  },
  
  ...
}

Upvotes: 1

Cem Karakurt
Cem Karakurt

Reputation: 241

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

Upvotes: 2

Related Questions