Resources for using Tailwind CSS

Tailwind CSS

We continue progressing with Tailwind CSS and Vue 3, but in this post, I’m going to focus on resources exclusively for working with Tailwind. And although it is interesting to know all the classes and everything you can do, there are a lot of sites that can help you.

The fundamental idea of this entry is, to learn by “copying”, because many times, learning only by reading the documentation is tedious. So, nothing better than to visit several sites to locate what we are looking for and proceed to the adaptation to what we need.

Let’s begin with ….

Tailwind Toolbox

If you need a template project to start with, you have a lot of things available at TailWind Toolbox. It is a collection of different GitHub repositories based on Tailwind CSS.

If you need a component, another option can be that the code is also included within the same page where it explains what the component looks like, (for example, this carousel example).

Tailwind Toolbox

You also have a series of Kits and Generators, to make it easier to create your components according to your needs thanks to these tools..

Finally, you also have a number of official Tailwind CSS plugins at your disposal.

Tailwind Components

A very similar idea to the previous one, but very focused on components, is what you can find in Tailwind components, another repository of community components for free disposal. They are organized by type, which makes it easy to find what you are looking for.

For example, if you need a component to make Login, here you can find several. And concretely, this login form is the one that I am going to use in the following entry.

Tailblocks: una de bloques

If after the two visits to the previous pages, you still haven’t found anything, move to tailblocks, which are also ready-to-use components (almost all their code is located on GitHub).

Colors, by Tailwind Ink

If what you need in Tailwind CSS is to work with a color template, a good solution is to go through Tailwind.ink, which leaves prepared the code to include. It is undoubtedly a great resource to have the colors to your taste and needs, in a fast and convenient way.

Tailwind templates

If you need templates to get started, instead of starting from scratch, another alternative is tailwindtemplates.io, which has a good variety of other components.

Other resources for learning Tailwind CSS

If you are starting with Tailwind, a very good option is to practice from the playground: https://play.tailwindcss.com/. So you can practice and see what you build in real time.

If you are a Tailwind lover and want to keep up to date with what’s going on with Tailwind CSS, you can subscribe to a newsletter.

My experience with Tailwind CSS and the resources

As of today, April 2021, I have worked rather little with Tailwind CSS. The main reason: I’m learning step by step from Vue 2 to Vue 3, and Vuetify is not yet available to work with version 3. In other words, I have used Tailwind CSS forced by the situation.

I’ve seen several video tutorials to get started with Tailwind, necessary to know the philosophy and be able to put it into practice, at least in the basics. Obviously, to be fluent in the front-end with Tailwind needs time, and I have focused more on learning Vue 3. That’s why I have used a lot of components from the resource pages I have shown in this post for the development of the examples I have worked with.

Finally, I must admit that working on the front-end is not what I like the most. I am not a graphic designer (nor do I pretend to be) and it is a difficult task for me, and Vuetify makes it easier because it comes predefined. On the other hand, Tailwind CSS is finer and allows you to adjust perfectly to what you need, because there are classes for everything.

Anyway, I have found it comfortable to work with the predefined components and templates that I have been finding, which has facilitated that my evolution with Vue 3 continues to be good, as you read.

Thanks for the reading and have a nice day!!