Now that you have installed Tailwind CSS using NPM, you will need to use the custom directive and inject Tailwind’s base, components, and utilities styles into your main CSS file. It’s an easy way to manage project dependencies across environments such as your local development files and production code from the server. What this does is that Tailwind CSS will now be available in your node_modules folder and the next time you will run npm install it will automatically download Tailwind CSS into your project as a dependency. After you have done it, run the following command in your terminal to install the latest stable version of Tailwind CSS and save it as a dependency: This will create a package.json file that holds information about your project and future library dependencies. If you don’t already have a package.json file, then run the following command using the terminal inside the root directory of your project: In this tutorial I will show you how to include the latest stable version of Tailwind CSS via NPM and then create a Tailwind configuration file and process the CSS based on that.įirst of all, make sure you Node.js and NPM installed on your machine. There are multiple ways of including Tailwind CSS into your project, and even though you can do it really fast via a CDN, the most recommended method is to use a package manager and then make full use of the configuration possibilities via PostCSS using building tools. Adding Tailwind CSS to your project via a package manager I wrote a pretty extensive article comparing Bootstrap to Tailwind a while ago. It is different from other CSS Frameworks, such as Bootstrap, because of the new way of building user interfaces using a utility-first approach, rather than an object oriented one. Initially, it was only a side-project for Adam Wathan that helped him with some of his projects, but in time became a fully-fledged and popular CSS framework with a new utility-first methodology.īy the beginning of August 2020 it is estimated that it was downloaded by over 10 million times, making it one of the most rapidly growing CSS frameworks in the world at the time and by the end of September 2020 it is estimated that the official Tailwind CSS documentation was accessed by over 1 million developers worldwide. The first release of Tailwind CSS happened on the 1st of November, 2017 on GitHub as an open-source project. It is a highly customizable collection of low-level CSS utility classes written in PostCSS destined to be customized using JavaScript. Tailwind CSS is the most popular utility-first CSS framework in the world for rapidly building custom user interfaces for the web.
Without further ado, let’s get started! Introducing Tailwind CSS If you want to download the files, you can find them on our public Github repository under the MIT license. I believe that it will be helpful if you get lost along the way. Reduce loading time and file size by purging the unused classes from your CSSīefore getting started, below you will find the final folder structure that you should have by the end of this tutorial.Customize fonts, colors and add extra classes using the configuration file.Building a responsive hero section using the utility-first classes from Tailwind.Creating the configuration file and process your CSS with Tailwind.
Adding Tailwind CSS to your project via a package manager.
Here’s the table of contents for this tutorial for Tailwind CSS: It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.īy the end of this guide you will be able to install, configure and build a responsive hero section ( live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility. In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS.