React js / Material UI

Tailwind CSS for React js

January 09, 2022

tailwindcss

So what is Tailwind CSS?

Tailwind CSS is summarised as a utility-first CSS framework. The first release of Tailwind CSS was in November 2017 which saw the framework get adopted by tech giants such as Mozilla. Today Tailwind CSS has taken the lead as the most popular CSS framework, leaving behind previous front runners like Bootstrap.

The beauty of Tailwind CSS is that it allows developers to easily customize CSS classes to create unique styles and custom user interfaces. With Tailwind CSS the developer has free-reign when it comes to choosing styles as there are no restrictive design stipulations. This design autonomy is why many developers are opting for Tailwind CSS as opposed to frameworks like Bootstrap that come with preset style kits.

Benefits of Tailwind CSS

  • Power to create truly unique styles/websites
  • Non-restrictive framework- no preset styles/components
  • Ability to reuse component styles
  • Easy and fast to use
  • Create responsive websites
  • Smaller CSS files

Tailwind Installation, in React js
Install Tailwind CSS with Create React App, Setting up Tailwind CSS 

Themes & Plugins


In Tailwind it had, 
  • etc..


Tailwind css - docs

Container Component / code
A component for fixing an element's width to the current breakpoint.


Justify Content / code
Utilities for controlling how flex and grid items are positioned along a container's main axis.

Using custom colors / code If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file

Font Size / code
Utilities for controlling the font size of an element.

Grid Template Columns / code
Utilities for specifying the columns in a grid layout.

Responsive Design / code
Using responsive utility variants to build adaptive user interfaces.Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.