DEV Community

Sara
Sara

Posted on

Tailwind CSS- the best CSS framework?

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 CSS in action

image of code
The above code really illustrates the ease in which a developer can style html elements quickly through Tailwind classes and create the user interface that they want. I created the height for the image with "h-30" and added a margin of 1.5rem with the "m-6" class. I was able to directly edit the text positioning and colour of the text in the h2 element with "text-center text-pink-400". I was also able to customise padding around the h2 element with "px-2 pb-5".

How to get started with Tailwind CSS

Step 1- Install package

In the terminal run the following code to install the Tailwind CSS package.
image of code

Step 2- Add tailwind to your created CSS file

After creating a CSS file, copy the following code into the file. What this does it allow you to use Tailwind by adding it to your project.
image of code

Step 3- Create your Tailwind Configuration file

Run the following code into your terminal
code image

After running you will notice a new file appear in your project called tailwind.config.js which contains the following code

code image

Step 4- Add the Postcss file
In the terminal run
code

After running the above installation is complete run the following code into the terminal.
code

You will now have a postcss.config.js file. Add the following code to the plugins.
code image
PostCSS is a tool used for transforming CSS with Javascript plugins. It allows you to get access to the Tailwind by adding it to the plugin. It creates a build folder where the processed Tailwind is outputted.

Step 5- Finally in the terminal run
code image
Followed by

code
This completes the installation process. Now you need to create a index.html file where you will be executing your Tailwind CSS code!.

You are now ready to use Tailwind CSS

Now that you are up and running it is time to get creative with Tailwind CSS. Go through the extensive and limitless Tailwind Docs to create your own unique website and have fun!

You can now firsthand experience how powerful Tailwind CSS is and it might just become your favourite CSS framework.

To further explore Tailwind CSS check these out

Tailwind Official Website
William Vincent- a beginner's guide
Tailwind for absolute beginners
Free Code Camp- how to use Tailwind CSS

Discussion (2)

Collapse
moopet profile image
Ben Sinclair

You can embed code snippets with markdown using backticks, which would make them accessible to everybody.

Collapse
saramo93 profile image
Sara Author

Thank you for your great point.