Faster UI development with Tailwind CSS

What is Tailwind?

Tailwind is a utility-first CSS framework. The main difference between other frameworks like Bootstrap, is that it doesn’t have ready components as such, but provides base classes that allow you to construct one easily. More details will follow 😉

Why Tailwind?

As mentioned before, Tailwind doesn’t have provide you the components such as alert or carousel. This gives you some benefits: you don’t have to remember that special class name, and you don’t have to include the whole framework just because you need the alert.

Consider this example:

<div class="bg-slate-50 border border-black/5 text-black text-lg font-thin rounded-xl overflow-hidden p-4 m-2">
  Here is a simple message component that you can copy and paste into any Tailwind-based website.
</div>

While this is a very simple example, it shows the next:

1. You don’t need to remember this component name (was is alert? message? notice? notification? box?).
2. You can transfer this component from one project to another without copying a single line of CSS. All you need is HTML.
3. You can easily preview this component online by going to https://play.tailwindcss.com/, you don’t need a local environment just to preview the component.
4. You can copy this component into another one, or copy another one inside of this one. And it will still look correct, because you didn’t write your CSS rules like .box p { ... }. So there’s no conflict, and CSS classes do exactly what they are written to do.

Fast way to start with Tailwind.

First, take a look at the installation guide at https://tailwindcss.com/docs/installation, as it might differ from the time of writing. But, in short, assuming you have NPM installed:

1. Go to your project folder and run npm install -D tailwindcss
2. Run npx tailwindcss init, this will create the default Tailwind configuration file tailwind.config.js
3. Create your source CSS (i.e. src/style.css) and put the Tailwind base code in it:
   @tailwind base;
@tailwind components;
@tailwind utilities;
4. Run the compilation process so that your src/style.css will be processed and compiled to dist/style.css
5. Link the resulting CSS file as you usually do with <link rel="stylesheet" href="dist/style.css">

Using Tailwind in a WordPress theme.

You can use the method above to instantly start using Tailwind in your theme. But, you would need to deal with all the other tasks – style main navigation, load footer menu items with specific classes and so on. Or, you can use a ready-made theme, that already has Tailwind set up, is mobile ready, and has all the compilation processes prepared for you. Here are your options.

Tailpress.

Tailpress is a ready starter theme for WordPress. Fork it, change it as you wish, it’s instantly ready for development. It has everything you need to start, develop and build production resources. Read more

Underscoretw.

_tw is another Tailwind starter theme that is ready to use as soon as you clone it from a repository. It has all the theme parts prepared with Tailwind classes, and all deployment scripts preconfigured as well. Read more

---

Did you know that I made an in-browser image converter, where you can convert your images without uploading them anywhere? Try it out and let me know what you think. It's free.