loading...

Setting up Tailwindcss with Vue CLI 3

abhisheksarmah profile image Abhishek ・2 min read

This article explains how to set up Tailwindcss in a Vue CLI 3 project. In this post, I am going to show you how to use tailwindcss 1.2.0 on a Vue application.

It consists of 4 simple steps -

Install Tailwind

First step is to install Tailwind via npm or yarn

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Create a tailwind config file (optional)

If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package

npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project which looks like

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Configure PostCSS

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

// postcss.config.js
const autoprefixer = require("autoprefixer")();
const tailwindcss = require("tailwindcss")("./tailwind.config.js");

module.exports = {
  plugins: [tailwindcss, autoprefixer]
};

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

Add Tailwind to your CSS

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

@tailwind base;

@tailwind components;

@tailwind utilities;

Import the file in your Vue app(main.js)

// @ in vue points to src/
import '@/assets/css/style.css'

That’s it! Now restart your Vue CLI project and it should all work fine. Checkout Official Tailwindcss docs for more information.

Posted on by:

abhisheksarmah profile

Abhishek

@abhisheksarmah

Building things using Laravel and Vue Js. Love to cook in my free time. Currently, I am starting to write blogs.

Discussion

markdown guide