I have been developing software to help eCommerce companies support their customers for years now, and one of the areas I have consistently failed to grow in is UX design. I have always been envious of those who have a natural ability for it and can quickly hack out a nice-looking user interface like it was nothing. That’s changed recently, as I work more and more on the frontend, and so I decided to start taking learning this skill set more seriously.
In comes Tailwind CSS to the rescue, a utility-first CSS framework that has made me rethink the way I look at design and helped me to learn the basics. As a developer and system-oriented person, it gives me a methodology that allows me to create my own custom interfaces. Since I lack the natural intuition towards design, having a consistent design system helps ease the anxiety that comes with design while slowly growing the muscles needed to do so effectively.
What is Tailwind?
Tailwind CSS is a utility-first CSS framework for rapidly building custom designs:
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
— TailwindCSS
This framework provides you with low-level utility classes that let you build completely custom designs quickly. It is not focused on verbose out-of-box components, but rather a methodology that allows you to build custom, "bespoke" components yourself, quickly.
Why is it different that other frameworks?
Tailwind CSS stands out to me from other CSS frameworks because it seems to be focused on being a design system rather than providing a set of pre-defined out-of-box components. From my experience using other frameworks such as Bootstrap, I usually start with these out-of-box components, but then I shortly after need to customize them. This customization usually ends up being inconsistent, hack-y, and counter-productive. Rather than trying to fight with opinionated out-of-box components, Tailwind gives me the confidence to design my own custom components without getting in my way.
My overall favorite part about Tailwind CSS is that it helps me learn to make design decisions more quickly and consistently than before. Much of this boils down to the Utility First Philosophy, which limits your choices, so rather choosing between a padding-right between 1px and 200px, I choose between a few different fixed increments of padding. While this definitely makes my design far more consistent, it also helps me to make decisions more quickly, because I have to choose between a handful options, not 200 pixels worth of them. As I make more and more decisions using this philosophy, I find the decisions coming more quickly, and I feel more confident when making them.
Tailwind CSS differs from other frameworks because it doesn’t strive to provide the most amazing set of out-of-box components, but instead focuses on you, the developer, and how you can be the person that creates those awesome designs.
How can I start using Tailwind myself?
Tailwind CSS is pretty easy to get started with as they describe within their installation documentation. Depending on your frontend environment, you might need to do more or less than what is within the documentation. Personally, I use React often and so I find Create React App to be a good starting point.
Setting Up Create React App
If you want to get started with Create React App, then I will help get you started with that. First things first, be sure you have NodeJS and NPM (or Yarn) installed on your system, then run the following to set up your application:
Setting Up Tailwind CSS
Next, we need to move into the tailwind-react directory and install the tailwindcss dependency:
Now that tailwind is installed, initialize the tailwind.config.js file under ./src/styles, which is where you will manage the theme, plugins, or other customizations to Tailwind:
Setting Up PostCSS
At this point we need to set up PostCSS, and so we need to add a couple more dependencies:
Note
PostCSS is a tool for transforming css using JS plugins. tailwindcss is a plugin for PostCSS. autoprefixer is another plugin used to add or remove browser-specific vendor prefixes.
Now that we have those dependencies, we can set-up our postcss.config.js file at the root of our project:
And fill it with this content:
Creating the Tailwind CSS File
Now that we have PostCSS setup, we need to create the index.css file under src/styles with the following content:
Running PostCSS
Now we can update your scripts within package.json with a script to run the PostCSS tool and updating the other scripts to run this command before startup. The following will result in a file outputted at ./src/tailwind.css (be sure to add to .gitignore):
Note
Be sure to change commands for prebuild/prestart if using NPM!
You can now run this command and see the tailwind.css file created:
Adding CSS to the Application
We can finally add the CSS to the application by adding this line to src/index.js:
Replacing App with Tailwind Markup
Before starting up, let’s replace the content with App.js with something using tailwind styles (example from TailwindCSS documentation):
Starting Up
Finally, you can start up your application and see the results at https://localhost:3000:
Closing Thoughts
Tailwind CSS is a pretty impressive CSS framework that adds a ton of value for those looking to learn how to create beautiful, bespoke designs. I hope this blog gives a good introduction to TailwindCSS and makes you more excited to learn and grow as a designer!
