Functional CSS with Tailwind

Tony Ward (@YnotDraw)

Typical Styling Conventions

  • Use Block Element Modifier (BEM)
  • Create a component sass partial `_user-card.scss`
  • Add elements `.user-card__title`
  • Add modifiers `.user-card__status--active`

Problem With BEM

It's not descriptive

Potential bad abstractions

Naming things is hard already

Need to open template + sass files side by side for all information

☝️ (I'm lazy)



Front End Developer @ TC

I see things are broken into appropriate sections, but I have no idea what it looks like

Much Better: Functional/Utility CSS

  • Highly composable, low level utility classes
  • More descriptive class names
  • Allows you to get more information from the template


  .flex {
    display: flex;

  .justify-between {
    justify-content: space-between;

  .bg-black {
    background-color: #22292f;
Let's look at the Tailwind docs some more