Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
vue
communitycreator

How to setup Tailwind CSS in Vue 3

Martins Victor Onuoha

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

widget

Tailwind CSS is one of the newest and coolest utility libraries on the block, and it lets you build UI components with ease. Here’s a quick guide on how to set up Tailwind in your Vue 3 project.

Psst! There’s an official walkthrough in the Tailwind documentation, here.

First, generate a Vue 3 project using the vue-cli:

vue create my-awesome-app

Navigate to the project directory:

cd my-awesome-app

Next, we need to install Tailwind and its dependencies (PostCSS & auto-prefixer):

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Or, using yarn:

yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

Note: if you’re faced with this error:

> Error: PostCSS plugin tailwindcss requires PostCSS 8.

You would need to install a different build of Tailwind that supports PostCSS 7:

npm uninstall tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Generate the Tailwind and post CSS configuration files:

npx tailwindcss init -p

This will create two files in your root directory: tailwind.config.js and postcss.config.js. The Tailwind config file is where you add in customization and theming for your app. It is also where you tell Tailwind what paths to search for your pages and components. It looks something like this:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

We won’t go into explaining each of those properties; however, we need to update the “purge” property to include the path to our components and pages.

// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, create a folder called “styles”, and within that folder, create an entry CSS file (app.css):

mkdir src/styles && touch src/styles/app.css

We’ll import Tailwind’s styles using the @tailwinddirective within our entry CSS file:

/* ./src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, import your entry CSS file in your entry Javascript file (main.js):

import { createApp } from 'vue';
import App from './App.vue';
import './styles/app.css'; // Here

createApp(App).mount('#app');

Spin up your server and start using Tailwind’s goodness in your Vue 3 application. Try updating the App.vue component like so:

<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      Hello 👋🏼
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

You’ll get this result:

widget

You can find all of Tailwind’s classes and options in the official documentation.

RELATED TAGS

javascript
vue
communitycreator

CONTRIBUTOR

Martins Victor Onuoha
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring