How to Write Better Containers in Tailwind CSS

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Mark Mead

Throughout HyperUI you will see the classes max-w-screen-xl mx-auto px-4 used to contain content, this can be seen on the website and the components.

Some of you may be wondering…

Why not use the .container class?

Great question.

Let's look at the .container class documentation on the Tailwind CSS website.

As we can see it provides max-width sizes at different breakpoints, which results in the content within the container snapping to that size as the breakpoint is reached.

Container Example

If you shrink/expand the preview you will see the content within the container snapping.

A More Fluid Container

Here's the same preview but using the classes I mentioned at the start of this blog post.

Fluid Example

As you can see it's more fluid, you reach the breakpoint where max-w-screen-xl is no longer applied and then the padding is used to contain the content. If you wanted a fully fluid container you can remove the max-w-screen-xl class.

Let's compare the two.

Container vs Fluid Example

An argument for the .container approach is that the content is wider on larger screens, but to solve that you can use max-w-screen-2xl instead of max-w-screen-xl.

Edit the Config and Write Less Code

One final note, if you are using the .container approach and find yourself writing container mx-auto a lot, then you can do the following.

theme: {
  container: {
    center: true,

    // Optional
    padding: {
      DEFAULT: '1rem',
      sm: '1.5rem',
      lg: '2rem'
    }
  },
}

Fun fact, I wrote a blog post in 2021 arguing the .container approach over using max-w-screen-xl, you can still read that.

How to Write Better Tailwind CSS Containers - 2021

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Mark Mead

Print Share Comment Cite Upload Translate Updates

APA

Mark Mead | Sciencx (2022-09-22T15:46:52+00:00) How to Write Better Containers in Tailwind CSS. Retrieved from https://www.scien.cx/2022/09/22/how-to-write-better-containers-in-tailwind-css/

MLA

" » How to Write Better Containers in Tailwind CSS." Mark Mead | Sciencx - Thursday September 22, 2022, https://www.scien.cx/2022/09/22/how-to-write-better-containers-in-tailwind-css/

HARVARD

Mark Mead | Sciencx Thursday September 22, 2022 » How to Write Better Containers in Tailwind CSS., viewed ,<https://www.scien.cx/2022/09/22/how-to-write-better-containers-in-tailwind-css/>

VANCOUVER

Mark Mead | Sciencx - » How to Write Better Containers in Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/22/how-to-write-better-containers-in-tailwind-css/

CHICAGO

" » How to Write Better Containers in Tailwind CSS." Mark Mead | Sciencx - Accessed . https://www.scien.cx/2022/09/22/how-to-write-better-containers-in-tailwind-css/

IEEE

" » How to Write Better Containers in Tailwind CSS." Mark Mead | Sciencx [Online]. Available: https://www.scien.cx/2022/09/22/how-to-write-better-containers-in-tailwind-css/. [Accessed: ]

rf:citation

» How to Write Better Containers in Tailwind CSS | Mark Mead | Sciencx | https://www.scien.cx/2022/09/22/how-to-write-better-containers-in-tailwind-css/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

A More Fluid Container

Edit the Config and Write Less Code

Related Posts