Introduction to TailwindCSS

Tailwindcss is an utility-first CSS framework.
It enables to use pre defined classes like text-center, mt-6, flex etc.

With tailwind you don’t need to think about many pre defined classes and start using them directly in your project. Isn’t that great to have all of the utility classes before you start your project?

Tailwind also checks which classes are used in your application and reduces the build size significantly on the production optimization.

While you are developing your application utility classes makes great impact on development speed and it enables you to work on consistent stylings.

What can be consistent for your project?

There are some examples below

  • Color palette
  • Spacing
  • Typography
  • Shadows
  • Grid systems
  • Margin, Padding

If you are using any of them in your application (if you don’t you should 🙂) these values can be consistent in your app.

Sizing

Width

Width can be adjustable as w-{number}

<div>
<div class="w-8 ..."></div>
<div class="w-12 ..."></div>
<div class="w-16 ..."></div>
<div class="w-24 ..."></div>
</div>

If you are using width inside the flex element you can easily adjust them as

<div class="flex ...">
<div class="w-1/2 ... ">w-1/2</div>
<div class="w-1/2 ..."">w-1/2</div>
</div>
<div class="flex ...">
<div class="w-2/5 ...">w-2/5</div>
<div class="w-3/5 ...">w-3/5</div>
</div>
<div class="flex ...">
<div class="w-1/3 ...">w-1/3</div>
<div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
<div class="w-1/4 ...">w-1/4</div>
<div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
<div class="w-1/5 ...">w-1/5</div>
<div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
<div class="w-1/6 ...">w-1/6</div>
<div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>

You can have a look all information about width in tailwind width documentation

Colors

Tailwind has a very good color palette and you can customize them as you want as well!

Typography

Font sizes can be adjustable as below for your purposes.

You can use them as text-{size}

Grids

Grids are now much more easy!

To have an grid system is very easy with tailwind. You can add grid and grid-cols-{number} after that all the elements inside that container would be showed inside that grid.

<div class="grid grid-cols-3 gap-4">
<div>1</div>
<!-- ... -->
<div>9</div>
</div>

Flex

Tailwind utility classes enables users to control how flex grow and shrink.

flex-initial: use to allow a flex item to shrink but not grow, taking into account its initial size.

flex-1: use to allow a flex item to grow and shrink as needed, ignoring its initial size.

flex-auto: use to allow a flex item to grow and shrink, taking into account its initial size.

flex-none: use prevent a flex item from growing or shrinking.

Dark Mode support

Recently many websites now supports dark mode and i totally support that change and give availability to user to choose dark or white mode.

These 2 examples below will show how effective and easy to implement dark mode in tailwind.

For the dark mode classes the only thing you need to write dark:bg-gray-800 and if you want to change any elements dark mode only thing you need to include dark:{class name}

Conclusion

There are many another classes are available in tailwind.css if you like using utility classes tailwind definitely will help you on building design of your pages in a very faster way.

If you would like to explore how to use Next.js with tailwind you can have a look at Nextjs with TailwindCSS post on medium.

You can buy me a coffee!

Thank you for reading this far.

Follow me on Medium or Github if you’re interested in more in-depth and informative write-ups like these in the future. 😀

Melih

Senior Full Stack Software Engineer — Javascript — Berlin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store