Getting started with Tailwind CSS

I recently began creating my personal portfolio in preparation for my job hunting journey, and in doing so, I started playing with different CSS frameworks. I have a little experience with Bootstrap from going through Colt Steele's "The Web Developer Bootcamp" on Udemy, but as I began working on my project, I found that Bootstrap felt heavily opinionated and overpowered a lot of what I wanted to do.

Recently, I've seen people talk about alternative CSS frameworks on Twitter such as Foundation, Materialize, and many others. One of the frameworks that kept popping up is Tailwind CSS. After heading over to their site and taking a look at their docs (which are very easy to read and follow along with), I decided that I wanted to learn Tailwind and use it for my portfolio.

Installing Tailwind

To start off, you have two options for implementing Tailwind in your project:

1. You can use npm/yarn to install Tailwind (this is the approach we will use).
2. You can include it via CDN (not recommended as you lose out on many of Tailwind's features).

First, navigate to your project's directory and create your package.json file by using the following command in your terminal:

Then, to install Tailwind, use one of the following commands:

Now that we have Tailwind installed, open the project in your text editor of choice.

At this point, you will want to create two folders in your project, one named src and one named public. In your src folder, you will want to create a CSS file (I'll name mine styles.css). In this CSS file, we will need to import Tailwind's basic functionality using the following syntax:

At build-time, Tailwind will take the CSS file in your src and generate a vanilla CSS file in your public folder that you then link to in your HTML.

Building your CSS File

There's one final thing you need to do before you can start styling your site using Tailwind, and that is creating a script to easily build your CSS file.

Open your package.json file and under scripts, you will want to add the following text. We will dissect what each piece means, don't worry.

• build-css: This is the name of the script you will use in the terminal to build your CSS file. You can name it whatever you would like.
• tailwindscss build: This tells it to use the Tailwind package and the build command
• src/styles.css: This tells the program where the source file is that you want to build your CSS file from.
• -o: This argument tells the program where to put the output.
• public/styles.css: This is the destination file of where Tailwinds should build the vanilla CSS.

Get Stylin'!!

Now that you have Tailwind setup, you can begin using it in your project! Tailwind is made up utility classes, similar to Bootstrap, which allows you to highly customize the designs and responsiveness of your site. You can even extend the configuration of Tailwind and add your own styling, colors, fonts, etc. This tutorial is by no means exhaustive of all that Tailwind can do, but I hope that it will help you to get started!

I would highly encourage anyone to go and check out the Tailwind docs to learn more about what all you can do!