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.
To start off, you have two options for implementing Tailwind in your project:
- You can use npm/yarn to install Tailwind (this is the approach we will use).
- You can include it via CDN (not recommended as you lose out on many of Tailwind's features).
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.
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.
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.
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!