Skip to content

Using Tailwind with Vue.js

This article explains how to set up Tailwind for usage in a Vue CLI 3 project

Tailwind is a pretty cool CSS framework.

In this post I'm going to show you how to use Tailwind (v1.0.5) on a Vue app.

It's 4 simple steps:

<!-- TOC -->

<!-- /TOC -->

In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.

Install Tailwind

First step is to install Tailwind, using npm or yarn:

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

Create a configuration file

Next, use the Tailwind command that is provided to create a configuration file.

./node_modules/.bin/tailwind init tailwind.js

This will create a tailwind.js file in the root of your project, adding the basic Tailwind configuration. The file is very long, and I won't paste it here, but it contains lots of presets that will be very useful later.

Configure PostCSS

Now you need to tweak the PostCSS configuration to make sure Tailwind runs. Add:

module.exports = {
  "plugins": [

to your postcss.config.js. Create one if it does not exist.

Note: if you set Vue CLI to store the configuration in package.json, make sure no PostCSS configuration lies in that file. By default Vue CLI adds these lines:

  "postcss": {
    "plugins": {
      "autoprefixer": {}

remove them, or the postcss.config.js file won't be read.

Create a CSS file

Now create a CSS file in src/assets/css/tailwind.css and add

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the file in your Vue app

Import tailwind in main.js:

import '@/assets/css/tailwind.css'

(@ in vue points to src/)

That's it! Now restart your Vue CLI project and it should all work fine.

Testing it works fine

You won't notice anything unless you add Tailwind-specific classes.

Try for example adding this HTML in one of your templates:

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">

That should create a colored box.

→ Download my free JavaScript Handbook!



You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about vue: