Tailkick: A classic PHP-based WordPress theme powered by Tailwind CSS

February 03, 2023

Tailkick is a classic WordPress theme that leverages the power and simplicity of Tailwind CSS to give your website a fresh, modern look without breaking or rewriting lots of CSS. While Tailkick is available for end users, it is primarily a starter theme for WordPress developers.

Challenging CSS Best Practices

Traditionally, crafting a custom design for your website meant writing extensive CSS. The Tailwind CSS framework allows you to create a custom design without the need for additional CSS. Let’s compare two approaches.

The traditional approach: write custom CSS for a custom design:

<button class="nav__btn--teal-3">Download</button>

<style>
  .nav__btn--teal-3 {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    font-weight: 700;
    background-color: rgb(94,234,212);
    border: 1px solid rgb(0,0,0);
    box-shadow: 5px 5px 0 0 rgba(0,0,0,0.20);
  }
</style>

The Tailwind approach: create a custom design without writing additional CSS:

<button class="mt-3 px-4 py-2 font-bold bg-teal-300 border border-black shadow-[5px_5px_0_0_rgba(0,0,0,0.20)]">Download</button>

Tailwind CSS describes itself as a “utility-first CSS framework.” It is an extensive library of class selectors mapped to carefully constrained rulesets called “primitive utilities.” You style HTML elements by adding and removing Tailwind classes in your markup. Tailwind users often say it increases their productivity and is easier to manage as their projects grow in complexity. The framework addresses well-known pain points associated with CSS development:

• No more need to come up with silly class names for new styles (e.g. card-4__subttl--lightorange-3)
• An end to sprawling additions to the CSS as a website grows with new features and designs
• Dead code is eliminated; refactoring feels safer

The Tailwind framework is a descendant of Atomic CSS, which achieved notoriety with Thierry Koblentz’s 2013 essay Challenging CSS Best Practices. Read more about Tailwind’s philosophy on its website. (See also The Evolution of Scalable CSS.)