Tailkick

A WordPress Theme Utilizing Tailwind CSS

TailKick offers WordPress site owners a fresh look and theme builders a surprisingly pleasant developer experience.

WordPress users can switch their websites to the TailKick theme and make customizations in the usual way.

For folks interested in working with TailKick's codebase, those who may create a new theme based on TailKick or those interested in contributing to this project :smile:, I recommend the Tailwind CSS framework and its challenge of traditional CSS best practices.

The traditional approach: write custom CSS for a custom design

<a class="nav__btn--teal-3" href="#" type="button">Download</a>

<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

<a 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)]" href="#" type="button">Download</a>

<!-- No new CSS needs to be written -->

More about Tailwind

Getting Started

Use the Default TailKick Theme on a WordPress Site

• Download a tailkick.zip file found on the Releases page.
• Upload the tailkick.zip file through your WordPress dashboard. (See WP help docs.)
• The theme will appear in the dashboard. Click the Activate link to make TailKick the Current Theme.

Without editing template files, CSS, or PHP, you can personalize TailKick's look using your unique content and WordPress's Customize API (Customizer).

Develop a Theme Based on TailKick with Tailwind CSS

git clone https://github.com/ge3224/tailkick
cd tailkick
npm install
npm run start:css

More About Tailwind CSS

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 in 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.)

Contributing to TailKick

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

References

• Theme Handbook
• Tailwindcss Utility-first Fundamentals
• The Evolution of Scalable CSS

TODO

• Add a favicon
• Use PostCSS minifier
• Test responsive layouts
• Theme Unit Test
• Test legacy widgets
• Check accessibility
• Build more customizer options for home hero (text placement)
• Accommodate block theme development