Using Tailwind with Vuejs

We (Codingcoach.io contributors) decided to migrate from Scss to Tailwind because we are a distributed team and Tailwind helps us maintain styling consistency by providing defined values upfront for properties like color, spacing, font size e.t.c. It was a good experience for me and I fell in love with Tailwind.

What is Tailwind?

Tailwind is a CSS framework that enables rapid development of User interfaces, You might think this is other Bootstrap or Foundation but Tailwind isn’t, It doesn’t have a theme or come with any UI components instead it provides composable utility classes which you can use in UI development without writing almost any CSS.

In this article I will be going through setting up Tailwind in a Vuejs application and also share a simple form I made using Tailwind. It also assumes you have a good understanding of Vuejs.

Setup Tailwind in Vuejs

First install Tailwind using Yarn or Npm

npm install tailwindcss --save-dev

or

yarn add tailwindcss --dev

Next Create a Configuration File.

The configuration file contains basic Tailwind configuration for color, fonts e.t.c and you can also add plugins there to extend tailwind's functionality.

To create the config file tailwind provides CLI utility to do this:
./node_modules/.bin/tailwind init [filename]
you can name the file anything but it is recommeded to name it tailwind.js and should be placed in the root of the project.

In order to use Tailwind in Vuejs create a CSS file in the src/assets folder and add the following to inject Tailwind’s preflight and utilities styles into your CSS.

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Then import the CSS file into the main.js in the src folder.

Now we have every thing setup.
I built a simple Sign Up form that uses almost no CSS and I also used a plugin for the transition animation in the button. You can checkout out the demo and code