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

Comments

[Mattia Astorino]

Here a test using vue-cli 3 and enabling the extract css (instead to inline it). A 412kb css were loaded just using one apply on a button. This is the first fail because i'm applying a bunch of classes in my component, i don't need the full bundle. The component class is inside the bundle.

.btn {
  @apply .font-bold .py-2 .px-4 .rounded .bg-red .text-white;
}

---

Even with a lazy loaded component it include the 400kb css "core" bundle beside the component css (where the above class and @apply is used). The bundle contains all the class combinations, media queries, selector hacks, and so on, even if don't need them in my component. So another fail:

---

Disabling the extract css feature, it keeps working, inlining the component style and a "normalize/core style". no .css bundle were loaded. This is a "meh" because it's better than the extracted css:

[Nero Adaware]

Awesome stuff here, very informative.

[Mattia Astorino]

This is not misleading e fully replicable. I don’t need the old and ugly bundle.css when i work with such technologies. I will try to @applying utilities and other things inside my components css. Btw, for sure you can optimize the css but in this use case it’s not relevant. The point isn’t the bundle size, is the fact that there shouldn’t be any bundle.css if i’m lazy loding components. Plus, the context here is this article, that show a configuration that should not be used inside vue, where you have single file components and you shuld put components css inside that file.

[Mattia Astorino]

Why this arrogance? How can you tell that i don’t know what i’m talking about? I tell you again the bundle size and css optimisation is not the key point here. If you don’t get it, don’t reply.

Ps: purgeCSS is useless for my workflow because i don’t have unused css (i just need cssnano with more controls). Check my site, it may help you getting the point here.

[Mattia Astorino]

Using a css framework within a component based architecture is a bit anti-pattern, you know

[Nero Adaware]

Tailwind allows you create component classes using @apply read more

[Mattia Astorino]

Mmm no since you have to import the css globally. It’s incompatible with chunks and lazy loading as i saw. Or not?

Edit: i saw that they provide a full npm package so it can work, but i’m not fully convinced

[Nero Adaware]

As far as my knowledge goes it's incompatible with lazy loading.

[Mattia Astorino]

Btw there are more things i don’t like. For example the @apply at-rule that is provided by a postcss-plugin, based on the old and abandoned @apply spec. I will do some test with vue, chunking and lazy loading components

[Nero Adaware]

The @apply spec might have been abandoned but I think @apply is quite useful in Tailwind. I'd like to know what your thoughts are when you are done with the test.

[Ben Blue]

Hey Nero!

Thanks for the great post. I found it helpful for getting started with Tailwindcss and Vue.

I have a question about using @apply within single file components. How can you setup tailwindcss to process @apply within the section of a SFC?

Thanks for your time,
~ B