Getting started with Tailwind CSS

Timothy Sutton — Wed, 16 Sep 2020 17:48:21 +0000

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:

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).

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!

You don't need to be a master...

Timothy Sutton — Mon, 24 Aug 2020 00:48:14 +0000

I began my journey of learning to code and making a career change about a year and a half ago. I had recently moved to a new city and was working a job that I didn't care for or saw myself doing in the future. I have always been somewhat interested in computers and had dabbled in some Codecademy courses before, but I never really dedicated the time to learn how to code. I knew some people who had make the transition into the code world, and so I began my journey of exploring of what my transition into coding might look like. Over the last year and a half, I have failed a lot. I have been so frustrated because I had no idea what I was doing at times. I wanted to give up. Only recently have I taken the time to look back and realize how much I have actually learned and grown since I started learning to code. I consistently struggle with Imposter Syndrome, but I have come to terms that I do not think it will ever truly go away. While I acknowledge that I do not know a lot about coding, I do want to share a few things I find helpful to remind myself of in the hopes that it might help you.

You don't have to be a master of everything. You don't have to master Python, web development, the terminal, the latest JS framework, or whatever it is that you're told you need to master. No one can truly master any given topic. It may seem that someone that comes across your Dev/GitHub/Twitter feed knows everything about JS or [insert technology here]. I promise you that they too need to look things up each and every day.
Put yourself out there and contribute. I'm preaching this to myself at this very moment. This is my first real article or contribution to any tech related site. It's okay if you haven't worked in software for 20+ years. Share what you know. Try to teach and explain something, even if it the basics of programming. You can help someone out there.
Always be open to learning. I am always looking for people to follow on Twitter or Youtube channels that I can learn from. Tech is always evolving so your learning will never be complete.

I hope this has helped someone out there. Please feel free to reach out with advice you wish you someone had told you when you were first starting out!

Forem: Timothy Sutton

Getting started with Tailwind CSS

Installing Tailwind

Building your CSS File

Get Stylin'!!

You don't need to be a master...