In this post, we’ll talk about how switching to utility-first CSS framework like Tailwind CSS might work for you.
Also, we’ll explore Tailwind CSS on a broad level.
On top of that, we’ll also be building a simple GatsbyJs App from scratch using Tailwind CSS including Tailwind CSS installation, configuration, and designing options.
What was I using before?
Previously, I decided to build my own portfolio site with GatsbyJs and Bootstrap as the CSS framework. The reason why I chose to go with this tech stack is because I have been building several React/GatsbyJs websites in the past and I am also quite familiar with utilizing the Bootstrap framework. Although I was able to get it up and running fairly quickly, there was still something that I wasn’t quite happy about the user interface. Until I discovered Tailwind CSS and what it can do to improve my site and essentially meet my satisfaction.
Why did I make the switch?
My goal after discovering Tailwind CSS was to simply rebuild any complex user interfaces without having my site to look alike any other sites out there. This is the difference between Bootstrap and Tailwind CSS. If you have never used and worked with Bootstrap before, you can tell right off the bat when a site is using Bootstrap framework.
(hint: just simply look at the Bootstrap buttons and compare them to Tailwind CSS buttons!)
However, don’t get me wrong here, Bootstrap is still great and does the job for certain project needs and requirements. In fact, I do still use Bootstrap for my other sites because it comes with a lot of pre-styled components out of the box that are ready to use and look good. If you are just wanting to whip up an absolutely basic interface for a quick PoC (proof of concept), then Bootstrap is your go-to.
Having that in mind, firstly I want my new portfolio site to be able to easily handle consistency in terms of padding, margins, colors, and sizes. With Tailwind CSS, I could just write utility class and then repeatedly use them in my codebase.
Secondly, I want something that can speed up the process of handling responsiveness of the site from small screens to bigger screens. Tailwind provides five breakpoints by default to serve different common device resolutions. This makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
Thirdly, I want something that doesn’t make it harder on me as the developer to support dark mode. Dark mode has become the first-class feature of many operating systems. To make this as easy as possible, Tailwind comes with a ‘dark’ variant that lets you style your site however you want when dark mode is enabled.
And lastly, I want to finish this project feeling more productive than ever when it comes to developing the user interfaces. Since Tailwind comes with a set of utility classes, once you get used to the custom terms and vocabulary, you will feel like you are flying! All in all, Tailwind’s system is a masterpiece of design which I as a developer love it and feel empowered by it.
What is Tailwind CSS?
Okay, then let’s talk about “what” is Tailwind CSS? Tailwind CSS is a utility-first CSS framework that provides you with a set of low-level utility classes. This framework uses atomic CSS (or functional CSS) which is essentially a delivery mechanism that allows you and I, as developers, to apply the system to the UI. On top of that, it uses PostCSS to process the final output and it comes with PurgeCSS which removes unused CSS from your project file.
In this post, we’ll be using the Gatsby Default Starter. If you’ve never used Gatsby before, I have included a quick tutorial on how to create a new Gatsby project, but you can read more about it here from the docs. But the idea here is simple, you can use any of your favorite framework or library and install Tailwind CSS to handle the styling for you!
Part 1: Gatsby Quick Installation Guide
Step 1: System requirements
Make sure you have Node.js, Git, and other tools required to get started with your first Gatsby project. To learn more about it, check out the Gatsby docs.
All of these must be available in your PATH. To verify things are set up properly, you can run this:
git --version
node --version
npm --version # or yarn --versionIf you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.
Step 2: Download/Install the Gatsby CLI package:
npm install -g gatsby-cliCheck out all the available commands:
gatsby --helpStep 3: Create a Gatsby site using the default starter template
Stick this in your terminal and hit enter
gatsby new my-first-gatsby-project https://github.com/gatsbyjs/gatsby-starter-defaultChange into the directory:
cd my-first-gatsby-projectStart the development server:
gatsby developView your site locally. Open up a new tab in your browser and navigate to: http://localhost:8000/
Part 2: Setting up Tailwind CSS
Step 1: Create two configs for Tailwind CSS and PostCSS:
Note: You might not have do this, so check if they're preinstalled in your root directory.
touch tailwind.config.jstouch postcss.config.jsAdd this default configuration inside tailwind.config.js:
// inside tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme")
const plugin = require("tailwindcss/plugin")
const colors = require("tailwindcss/colors")
module.exports = {
mode: "jit",
// purge: { // this is not needed for tailwind 3.0
// content: ["./src/**/*.js"],
// },
content: ["./src/**/*.js"],
darkMode: "class", // or 'media' or 'class'
theme: {
screens: {
...defaultTheme.screens,
xs: "475px",
},
textColor: theme => ({
...theme("colors"),
primary: "#397E89",
secondary: "#883377",
}),
extend: {
fontFamily: {},
},
},
variants: {
extend: {},
},
plugins: [],
}Step 2: Install Tailwind CSS and add NPM dependencies:
npm install --save gatsby-plugin-postcss tailwindcssStick this plugin in:
// inside gatsby-config.js
module.exports = {
// ...rest
plugins: [
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [require("tailwindcss")],
},
},
],
}Step 3: Import Tailwind CSS in the src/components/layout.css (at the very top):
// inside layout.css
@tailwind base;
@tailwind components;
@tailwind utilities;Congrats! You have now successfully added TailwindCSS to your Gatsby project!
Next, it’s time to add Tailwind classes to your HTML. In this post, we are only going to create a basic Hero component on landing page and play around with the styling options.
Part 3: Creating a basic Landing page
Before we start, let's first kill the dev server. Navigate to your terminal and ctrl + C.
Navigate to index.js file and replace the IndexPage component with this:
const IndexPage = () => (
<Layout>
<Seo title="Home" />
<div
className="flex items-center bg-gradient-to-br from-green-400 via-blue-500 to-purple-500
shadow-inner min-h-screen"
>
<div className="bg-white w-full py-6 shadow-2xl">
<div className="mx-auto container w-4/5 sm:w-3/5">
<div className="self-center items-center mb-4">
<h1 className="capitalize font-bold text-xl text-center text-secondary">
Your Name
</h1>
<h3 className="uppercase font-semibold text-primary text-center">
Full Stack Developer
</h3>
<div className="grid justify-items-center">
<button
className="transition duration-500 ease-in-out transform hover:-translate-y-1
hover:scale-110 bg-gradient-to-r from-green-400 to-blue-500 hover:from-blue-500
hover:to-purple-500 text-white font-bold py-2 px-4 border-b-4 border-blue-700
hover:border-purple-500 rounded mt-6"
>
Contact Me!
</button>
</div>
</div>
</div>
</div>
</div>
</Layout>
)Run the development server to rebuild the project.
gatsby developNavigate to your localhost server to see the result! 🙌
Styling in Tailwind CSS
Colors in Tailwind CSS
Inside tailwind.config.js file, we can override Tailwind’s default color palette, extend it or even disable it.
In our example, we have added two colors as ‘primary’ and ‘secondary’.
// inside tailwind.config.js
theme: {
textColor: theme => ({
...theme("colors"),
primary: "#397E89",
secondary: "#883377",
}),
...
},To apply it to your HTML, you can simply just add it using inline style as ‘text-primary’ or ‘text-secondary’.
<h1 className="capitalize font-bold text-xl text-center text-secondary">
Your Name
</h1>
<h3 className="uppercase font-semibold text-primary text-center">
Full Stack Developer
</h3>
Styling a Button
Tailwind comes with a palette of colors that you can choose from. I'd recommend you to check out all the colors they have and play around with it. In our example, we are using a gradient of colors.
bg-gradient-to-r from-green-400 to-blue-500
Hovering a component (Pseudo classes with inline styling)
In our example, we simply use a gradient of colors when a button is being hovered.
hover:from-blue-500 hover:to-purple-500
Other low-level utility classes that we’ve used in our example:
font-bold: add bold font;flex: display: flex;items-center: align-items: center;shadow-inner: box shadowmin-h-screen: setting minimum height of an element;w-full: width: 100%;w-4/5: width: 80%;self-center: align-self: center;py-6: padding-top: 1.5rem; padding-bottom: 1.5rem;mb-4: margin-bottom: 1rem;capitalize: text-transform: capitalize;uppercase: text-transform: uppercase;text-xl: font-size: 1.25rem; line-height: 1.75rem;text-center: text-align: center;justify-items-center: justify-items: center;transition: transition propertybg-green-400: to use green as the button’s background colorhover:bg-blue-700: to change the blue color when hovering over the button
The Downsides of Tailwind CSS 📉
As Tailwind CSS becomes more revolutionized, there are definitely some challenges. However, I am going to talk about the challenges I faced on the underlying concept of utility-first framework.
Repeatable CSS
With utility-first, you are going to have repeated classes. This could get annoying as your project eventually grows larger. Compare to regular CSS, you could just create a class that does the same job and you can reuse that class in multiple components.
Of course, you can find a way to not repeat the classes but that defeats the purpose of using a utility-first concept because the goal is to minimize the handling of CSS to your project.
Readability
Take our button for example. If you were to have multiple buttons on your site, you would have a long list of classes for each button and as you can already guess, It will be hard to read. This could be the biggest downfall of utility-first concept. As your project grows, you are more than likely going add tons of CSS classes to your project.
Atomic CSS downsides
Atomic CSS is not ideal for performance. You would have to ship more CSS to the browser than necessary because no tooling can extract the per-page critical CSS. As your utility-based CSS library grows, so does the amount of CSS you ship to your users, leaving you having to build more tools to remove styles that you were never going to use in the first place.
Conclusion
Was it worth switching to Tailwind CSS?
Most definitely, Yes! ✅After successfully rebuilding my portfolio site using Tailwind, I am loving every piece of it. If you love a good design, you'd definitely love Tailwind, especially with just how it gives you the aesthetic and modern feel and look. Very important for building the user interface to enhance user experience. 👀 They also have a great community and a well detailed documentation.
UPDATE: They had just recently upgraded to Tailwind 3.0.
Always keep this in mind, every tool and technology out there has tradeoffs. So it's always good to play around and test them. I hope that I’ve given you an overview of how Tailwind has helped me improve my project. 😇