Use Tailwind in Vue.js

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

Tail windIt is a very cool CSS framework.

In this article, I will show you how to use Tailwind (v1.0.5) on a Vue application.

This is 4 simple steps:

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

Install Tailwind

The 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 provided Tailwind command to create a configuration file.

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

This will create atailwind.jsAdd the basic Tailwind configuration to the files in the project root directory. The file is very long and I will not paste it here, but it contains many presets which will be very useful in the future.

Configure PostCSS

Now you need to adjustCSSConfigure to ensure Tailwind is running. Add to:

module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}

Give youpostcss.config.js. If it does not exist, create one.

Note: If you set the Vue CLI to store the configuration inpackage.json, Please make sure that there is no PostCSS configuration in this file. By default, Vue CLI adds the following line:

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

Delete them, Orpostcss.config.jsThe file will not be read.

Create a CSS file

Now create a CSS file insrc/assets/css/tailwind.cssAnd add

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

Import the file into your Vue app

Import tailwind in main.js:

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

(@directionsrc/)

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

Test works fine

Unless you add Tailwind-specific classes, you won't notice anything.

For example, try adding the following HTML to 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 ...">
  Test
</div>

That should create a colored box.

Download mine for freeVue manual


More vue tutorials: