• Home
  • Blog
  • Projects
  • Bookshelf
  • About
← Back to all posts

My Thoughts on Tailwind

Published 📅: ....
Last modified 📝: ....

Share this post on BlueskySee discussion on Bluesky

For a while now I've been pretty dismissive of TailwindCSS, usually brushing it off as yet another BootstrapCSS alternative. However, I've started using it in several of my side projects and I think I've changed some of my opinions on it as a tool.

Background:

Before using Tailwind, I was using Vanilla Extract, and before that was using Styled Components. I pivoted from each tool to the next one because of other technical limitations. In the case of the change from Styled Components to Vanilla Extract it was because I wanted to move away from runtime styling solutions (partially to prepare for React Server Components).

The shift from Vanilla Extract to Tailwind was similar, but more of a developer experience reason rather than for user experience. The short gist is that using Vanilla Extract with a Next.js application is incredibly difficult to setup "correctly". Yes there is a Next.js "plugin", but that doesn't work at all with React Server Components within Next.js[1]Jump to footnote. For Tailwind however, all I need to get it working is a tailwind.config.js file and Next does all the hard work for me!

Refined Thoughts:

After using Tailwind for a few weeks (both on my personal site here, as well as a few other side projects), I've been really enjoying it!

It's been nice not needing to worry about creating a separate file to maintain styles (e.g. a .css.ts file), or even maintain yet another build process during development as well!

There are stil some quirks with using Tailwind in my experience that I'd love to polish up a bit more:

  • Figuring out what class I need
  • Handling overrides / style composition

Figuring out what class I need

This might just be the initial learning curve of using Tailwind, but I feel like 99 times out of 100 I usually use the wrong align-items: center classname, and this happens with a number of other things also (e.g. colors, font-weight, etc).

Some things that have helped with this:

  • VS Code Tailwind extension
  • Search Tailwind Raycast extension
  • ChatGPT 🙃

Handling overrides / style composition

This one is a bit gnarly, and is really two issues:

  • Working with a component library that has already defined a classname that I want to override
  • Complex selectors (e.g. the "lobotomized owl selector")

I haven't found great solutions for either of these cases, for the second one I've been reaching for adding a custom class in my globals.css file and using @apply from Tailwind.

👆Back to reference See this long running issue trying to get it working within Next.js

Tags:

Web DevelopmentTailwindCSS

Loading...

Related Posts

Web Development

Onboarding Your New AI Teammate

Published: ....

Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?

Quick Tip - Theme Aware Images

Published: ....

Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?

Async Class Creation In JavaScript

Published: ....

Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!

Website Redesign v10

Published: ....

I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!

Server Side Rendering Compatible CSS Theming

Published: ....

A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!

Podcasting By Hand

Published: ....

A brief overview on how we launched The Bikeshed Podcast, including a deep dive in our recording and distribution workflows!

Quick Tip - Specific Local Module Declarations

Published: ....

A quick tip outlining how to provide specific TypeScript type definitions for a local module!

On File-System Routing Conventions

Published: ....

Some rough thoughts on building a file-system routing based web application

You're Building Software Wrong

Published: ....

Slicing software: why vertical is better than horizontal.

Single File Web Apps

Published: ....

What if you could author an entire web application in a single file?

Resetting Controlled Components in Forms

Published: ....

A quick way to handle resetting internal state in components when a parent form is submitted!

A Quick Look at Import Maps

Published: ....

A brief look at Import Maps and package.json#imports to support isomorphic JavaScript applications!

Recommended Tech Talks

Published: ....

A collection of tech talks that I regularly re-watch and also recommend to everyone!

Request for a (minimal) RSC Framework

Published: ....

Some features and functionality that I'd like within a React Server Component compatible framework.

Bluesky Tips and Tools

Published: ....

A (running) collection of Bluesky tips, tools, packages, and other misc things!

The Bookkeeping Pattern

Published: ....

A quick look at a small but powerful pattern I've been leveraging as of late!

TSLite

Published: ....

A proposal for a minimal variant of TypeScript!

Monorepo Tips and Tricks

Published: ....

Sharing a few core recommendations when working within monorepos to make your life easier!

Next.js with Deno v2

Published: ....

This is a quick post noting that Next.js should now work with Deno v2!

Don't Break the Implicit Prop Contract

Published: ....

React components have a fundamental contract that is often unstated in their implementation, and you should know about it!

A Better useSSR Implementation

Published: ....

Replace that old useState and useEffect combo for a new and better option!

My Current Dev Setup

Published: ....

A quick look at the applications and tools that I (generally) use day to day for web development!

There Is No Standard Markdown

Published: ....

There are a variety of different markdown "standards" out there, and sometimes they're not all that consistent

Abstract Your API

Published: ....

Proposing a solution for sharing core "business" logic across services!

Tip: Request and Response Headers

Published: ....

There's a common gotcha when creating Web Request and Response instances with Headers!

Using Feature Toggles to De-risk Refactors

Published: ....

Feature toggles are often underused by most software development teams, and yet offer so much value during not only feature development but also refactors

Hohoro

Published: ....

A quick introduction to my new side project, hohoro. An incremental JS/TS library build tool!

Custom Favicon Recipes

Published: ....

Two neat tricks for enhancing your site's favicon!

Corporate Sponsored OSS

Published: ....

The various risks and pitfalls of open source software run by corporations.

The Library-Docs Monorepo Template

Published: ....

A monorepo template for managing a library and documentation together.

Building Better Beacon

Published: ....

How we solved an almost show-stopping production bug, and how you can avoid it in your own projects.

Project Deep Dive: Tails

Published: ....

A(nother) deep dive into one of my recent side projects; tails - a plain and simple cocktail recipe app.

Churn Anxiety

Published: ....

When did semver major changes become so scary?

Service Monitors and Observability

Published: ....

Leveraging service monitors properly to improve service observability.

On Adopting CSS-in-JS

Published: ....

A brief recap of how Wayfair changed it's CSS approach not once but twice in the span of 5 years!

Project Deep Dive: Microfibre

Published: ....

A deep dive into one of my recent side projects; microfibre - a minimal text posting application

Pair Programming

Published: ....

Pair programming can be good sometimes - but not all the time

Suspense Plus GraphQL

Published: ....

A few thoughts on using Suspense with GraphQL to optimize application data loading

You've Launched, Now What?

Published: ....

A few thoughts on what to do after you launch a new project

Taking a Break

Published: ....

A few quick thoughts on burn out and taking a break

Managing Complex UI Component State

Published: ....

A few thoughts on managing complex UI component state within React

Understanding React 16.3 Updates

Published: ....

A quick overview of the new lifecycle methods introduced in React 16.3

CSS in JS

Published: ....

A few thoughts and patterns for using styled-jsx or other CSS-in-JS solutions

Redesign v6

Published: ....

A few thoughts on the redesign of my personal site, adopting Next.js and deploying via Now

JavaScript Weirdness

Published: ....

A few weird things about JavaScript

Calendar

Published: ....

Building a calendar web application

CSS

Server Side Rendering Compatible CSS Theming

Published: ....

A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!

CSS in JS

Published: ....

A few thoughts and patterns for using styled-jsx or other CSS-in-JS solutions