Floating on Tailwind CSS | SitePen

Styling of the past

The future: Tailwind CSS

Head-to-head showdown

Vanilla CSS

  1. Class names are arbitrarily named
    While semantic class names are usually easy to follow, forcing developers to add custom CSS class names to nodes inherently opens a project up to subjective naming deviations and steepens the resulting learning curve. Different authors may choose different class names to accomplish similar styling, so the CSS must always be consulted for truth.
  2. The required CSS is verbose.
    The resulting external CSS file is over 100 lines even with some reuse and streamlining of styling logic. While this could be made more concise if iterated on a few more times, this is inherently tedious to have to write so much custom CSS to accomplish styling that’s almost exclusively layout-based. In a component-based framework like React, this also requires an external CSS file to be created and imported, which is both tedious and incurs extra (albeit minimal) build time indirection.
  3. All CSS values used are arbitrary.
    The resulting CSS also includes raw measurements for things like paddings, margins, font sizes, and colors. Leaving such values up the developer to choose without any restriction on those choices again opens styling up to subjective deviation. This could be mitigated by sharing CSS variables, but then those variable names also must be learned, which can change between projects.

Tailwind CSS

  1. All presentation logic is in a single location.
    All markup and its corresponding styling is in a single, declarative location, allowing for easy mental absorption and easy declarative modification based on component state.
  2. Naming subjectivity is removed.
    Since no custom CSS is needed, no hard-to-follow custom class names or supporting CSS variables or utility classes are needed. This greatly reduces the learning curve when switching between potentially-unrelated projects since the syntax and available CSS class set will be the same.
  3. All values used adhere to the Tailwind internal system.
    When using styling that relies on values such as widths or colors, no longer are developers asked to loosely-adhere to an arbitrary measurement scale or to use proprietary color palette variables. Instead, Tailwind projects use the same utility classes, and the underlying values are automatically applied.
  4. Concepts are not per-project.
    Perhaps most importantly, all concepts provided by Tailwind can be applied across projects. Because Tailwind straddles a unique line in which it’s both low level and also provides smart values, it can be effectively used in entirely unrelated projects with entirely different higher level style guides, with no additional ramp up at all.

Customization

Conclusion

--

--

Modernizing Apps, Tools & Teams | sitepen.com | Twitter: @sitepen

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
SitePen

SitePen

Modernizing Apps, Tools & Teams | sitepen.com | Twitter: @sitepen