Press "Enter" to skip to content

How I make part of my designs? – Tailwindcss examples

Sharing is caring!

Tailwind CSS is something like Laravel for web designers. Me being the developer, it has become the right tool for developing my widgets with it. In doing so, I have started to notice patterns. Like,

  1. Level 1: Container with width. Widths have classes like w-full, w-1/3 or w-24. You can set sm: or md: or lg: for responsive. I do not mean .container class here.
  2. Level 2: Flex and flex-wrap is the main div that wraps your content.  It should be right beneath the container.Here, you can use justify-center to justify content or justify-between to have equal spacing between your elements inside this div. If you know about flex, you will learn it fast.
  3. Level 3: (Optional) Never use margin to place the contents here. Simply use paddings as much as needed. It only offers up to 8. It is enough for most of the cases. But if not, have a nesting div of paddings.
  4. Level 4: The content section should have its own width and it needs to be placed inside the flex.

Now contents will start to repeat from level 1 too.

This is the repetitive pattern while using tailwind CSS. Have a look at the example here. 

You can find their documentation here.

Everything is awesome.