Overview:
To maintain both consistency and flexibility with our designs, each of our sections are going to composed of four div's: Section, Container, Grid and Column. It's not imperative that you use all three if you want to cut on your html (dom) size, though it's what we use to keep all of our designs consistent.
- Section <div> This is the section wrapper where we will be defining the background colors and any section wide settings.
- Container <div> This is our contained element that is centered and defines the padding and max width.
- Grid <div> This is what will hold our our columns and define their layout.
- Column <div> This is what holds our content in each column.
Once assembled, your structure panel should look like this:
The section element holds three essential classes and a couple of optional classes used to style the content of that section:
- Section width: "w-full" - is used to make sure the section is always set to be full width.
- Background color: "bg-white & dark:bg-n-900" - are used to set the background colors for default (light) and dark modes. If you wish to change the background color you would remove these classes and add the new color you would like via the class. For example if I wanted our primary color, I would remove bg-white and dark:bg-n-900 and replace it with bg-p-500 ("bg" representing the background, "p" for our primary color and "500" for the shade of our primary color, combined marking "bg-p-500").
- (Optional) Text settings for that section: "text-base, text-p-500, dark:text-p-400" - In this case we have applied "text-base" setting the text of this section to the base font size (16px), "text-p-500" setting the text color to our primary neutral color, "dark:text-n-400" making the text a little lighter and easier to read when a visitor looks at the page in dark mode.
Here is what your constructed section should look like with light and dark options for both text and the background color:
Creating the container, setting the container width and setting the padding:
The container elements holds 4 essential classes used to set its max width and paddings.
- Container width: "max-w-6xl & mx-auto" - The max width makes this element function like a normal container without limiting us to a sitewide container size. The keep things consistent we would recommend using either "max-w-6xl" or "max-w-7xl" to set your width as they will work for most websites. In some cases like building a call to action that is centered on a page we would go for something smaller like "max-w-4xl". You can experiment with this by changing what comes after "max-w-..." to find what works best for your project. All available max widths can be found on tailwind's official documentation here. We then add the "mx-auto" class to center the container.
- Paddings: "py-32 & px-6" - These are our two go-to padding classes for all of our containers. "py-32" sets plenty of padding on the top and bottom of the container and "px-6" sets just enough for it to never get too close to the edge of the browser. Same here you can customize these to your hearts content by editing the number or switching out the padding classes altogether. You can find a list of all padding classes here.
Your final container should look like this:
Creating the grid and adjusting how many columns are in your layout:
The grid element holds a couple of classes and is only required if you're looking to have more than one column in your layout. In this example we will be creating a two column grid for small screens and above (tablets to desktops), and one column for extra small screens (mobile).
- Setting the div to have a grid layout: "grid" - This tells our div that we want to be using css grid for this layout.
- Defining the amount of columns in our grid: "sm:grid-cols-2" - this tells our grid that it should have two columns on all screens that are small and above. You can define any variation of columns by screen size by adjusting the number and what size we're targeting (xs: sm: md: lg: xl:). All of the options for grid columns are available here.
- Defining the gaps between our columns and rows: "gap-12" - this tell our grid that we want it to use "12" as the amount of spacing between each element. The 12 is being generated fluidly by our type scale. You can adjust the gap size to anything you would like by editing the number, all variables are available here.
Your final grid should look like this: 
Starting with pre-made sections:
Whilst it's important to understand how our sections are created and can be customized, it takes time to create each one. To solve this we've created a collection of pre-made sections with different layouts that you can just copy and past from here. These pre-made sections have light and dark variables pre-configured and the more complex ones have defined layouts for large and small screens. To speed up your workflow just copy the nintu sections you need, paste and edit the classes which you want to change.
