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.
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.
First install Tailwind using
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