· Originally published on Medium

TailwindCSS: a noob’s getting started

Tailwind CSS is a modern CSS framework with handy support for a variant of daily-used CSS styles. Instead of writing complex semantic classes which is hard to read and maintain,…

  • getting-started
  • tailwind-css
  • noob

Tailwind CSS is a modern CSS framework with handy support for a variant of daily-used CSS styles. Instead of writing complex semantic classes which is hard to read and maintain, Tailwind CSS makes styling a lot easier.

Basic concepts

Utility-First

Usually, front-end developers need to make their own classes apply to elements on the page. This requires a thorough understanding of CSS language with patience and carefulness.

While using Tailwind, all common-used classes are packed into Utility-CSS as they called. All utility classes are plugins in Tailwind. Which makes you save a ton of time inventing the names that should be called for every class you created and makes your CSS stop growing. Here’s a quick comparison between the coding style difference of Tailwind and traditional CSS.

Responsive Design

The user interface needs to adapt to different sizes of screens, this could be a hassle. Just like other UI frameworks, Tailwind identifies a couple of standards to make responsive adaption easier.

Breakpoint Prefix Minimum width sm 640px md 768px lg 1024px xl 1280px 2xl 1536px

To make the certain style displays on a certain size of displays, simply use the {prefix}: style format. Prefix is a common way to apply styles on elements, which will be often used.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

States

Elements in HTML have states, which triggered by mouse/keyboard events. According to the Tailwind documentation, there’s mainly two kinds of event. Some mainly apply to native HTML states, the others apply according to the position (index) related to its parent.

Tailwind use prefix grammar to describe states as well.

Basic HTML Events (State)

Just for demonstration, hover is a state while the user’s mouse stays on a certain element. Hover is only enabled by some of the core plugins like background_, border_, boxShadow, gradientColorStops, opacity, scale, etc. Full list in the official document.

But we can manually add hover variants to other plugins by modifying the config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      padding: ['hover'],
    }
  },
}

There is also documentation for focus and active, disabled, visited, and checked on the near page.

Advanced HTML Events (State)

Group-hover/Group-focus

Sometimes we need to apply different styles to groups of elements, this is where group-hovers shines.

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
  <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
  <p class="text-indigo-500 group-hover:text-gray-500 ...">Create a new project from a variety of starting templates.</p>
</div>

Group-hover is not enabled to all plugins by default. There’s another group-focus prefix also, documentation here.

Focus-within/Focus-visible

Prefix only apply a utility when a child element has focus:

<form>
  <div class="text-gray-400 focus-within:text-gray-600 ...">
    <div class="...">
      <svg fill="currentColor"></svg>
    </div>
    <input class="focus:ring-2 focus:ring-gray-300 ...">
  </div>
</form>

Index Related State

There are four kinds of variants that identify basically all occurrences of the possible application of styles in the child-parent scenario.
First-child, Last-child, Odd-Child, Even-child. It could be pretty handy while using loops in front-end frameworks. Here’s an example in Vue:

<div class="...">
  <div v-for="item in items" class="transform first:rotate-45 ...">
    {{ item }}
  </div>
</div>

Documentation here.

Basic Usage

For those who are not familiar with front-end development (like me). Styling could be hard to get hands-on.
Things would be much easier if we categorize our purpose correctly.
Generally, there is three use of styling.

  • Layout
  • Appearance
  • Animation & Interaction

In the official documentation, the categories are pretty detailed. We can classify them like this (the second layer of the list item is the title of the official document):

  • Layout
  • layout
  • flexbox
  • grid
  • box alignment
  • spacing
  • Appearance
  • sizing
  • typography
  • backgrounds
  • borders
  • effects
  • tables
  • transforms
  • svg
  • Animation & Interaction
  • transitions and animation
  • interactivity

The variants in the Layout category usually apply to elements like <div> or <span> which identifies a section on the page. They are often used to arrange elements on a page.

The variants in the Appearance category usually apply to elements like <button>, <input> or <radio>, etc. There are also styles for the specific element like table styles. But notice, appearance styles can also apply to section tags to create beautiful layouts.

The variants in Animation & Interaction can apply to all kinds of elements depends on how the interactive design is implemented by the user interface designer.

to be continued …

All articles