Vue.js 3 Tailwind Tutorial

Lesson Project

If you want to follow along with the examples, you will need to create an app generated by the Vue CLI .

What is Tailwind?

Tailwind is a CSS framework that allows us to build any design by composing predefined CSS classes in our HTML markup.

Even though Tailwind comes with any CSS class we could ever need, it’s highly customizable and easy to manage . The Tailwind website’s home page shows an interactive overview of many of its features.

note Tailwind is a complex CSS framework and is out of the scope of this course. But because it’s so widely used, it’s worth it to go through the setup and basics with Vue.

How to add Tailwind to a project

There are two ways we can set up Tailwind with Vue.

1. Manual setup that works for both CLI and Vite projects.
2. Vue Tailwind plugin .

We’ll use the Tailwind plugin for Vue for the examples in this lesson because it’s much easier and faster to set up.

How to install Tailwind with the Vue plugin

The Tailwind plugin for Vue adds Tailwind to a CLI generated project. If you’re using Vite, you will have to manually install Tailwind .

To add the plugin, we simply need to execute the following command from within our project.

vue add tailwind

The plugin will give us three options for which configuration to create.

• none . The plugin won’t create a config file at all. This is useful if you have a pre-existing config file.
• minimal (default option). The plugin will create a config file with the minimal required configuration. This is useful if you want to define your own customizations.
• full . The plugin will generate a config file that’s similar to Tailwind’s default configuration . This adds extra the colors, screen sizes etc. that you see in the documentation.

tip Generating a full configuration won’t increase the size of the final CSS file. PurgeCSS will remove any CSS you didn’t use in the application at build time.

For this lesson, we’ll choose the full configuration.

The plugin will generate three new files and change one existing file.

• [Added] tailwind.config.js
• [Added] postcss.config.js
• [Added] /src/assets/tailwind.css
• [Changed] /src/main.js

Let’s quickly explain these files.

tailwind.config.js:

Tailwind’s config file allows us to customize its installation. We can define custom options like color palettes or fonts, enable/disable dark mode, register plugins etc.

The configuration depends on what we selected when the plugin installed.

tip The default configuration file can be found here . If anything you want from it is missing from the generated one, just copy and paste it into your config file.

postcss.config.js:

PostCSS is a tool that uses Javascript to modify our CSS. It can do things like remove unused styles, add browser support definitions etc.

The plugin automatically generates this config file and typically we won’t need to change anything inside it.

/src/assets/tailwind.css:

Tailwind separates its styles in three different “layers” (a concept comes from the ITCSS paradigm).

1. base
2. components
3. utilities

These three layers needs to be imported into a master CSS file by using the @tailwind directives.

The plugin automatically creates this file and imports it into /src/main.js .

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

note The file can be stored anywhere in the project. If you move it, make sure to update the import statement in /src/main.js with the correct path.

/src/main.js:

To be able to use the CSS from Tailwind, the master CSS file needs to be imported into our /src/main.js file. It doesn’t need to be registered or anything, just imported.

The plugin automatically adds the import statement to our main.js file.

import { createApp } from 'vue'
import App from './App.vue'

import './assets/tailwind.css'

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

How to manually install Tailwind with npm

The manual setup for Tailwind is the same whether we use the CLI or Vite and follows the steps outlined below.

1. Install Tailwind and its dependencies into the project.
2. Create the configuration files for Tailwind and its dependencies.
3. Define our template and framework files in the main configuration.
4. Create a master CSS file and add the necessary Tailwind directives.
5. Import that CSS file into our main.js file so we can use it.

It seems complicated at first but is really quick and easy to do. Let’s follow the steps above to add Tailwind to the example project.

1. Install Tailwind and its dependencies:

We can install Tailwind and its dependencies with a single command.

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

2. Create the configuration files:

We don’t have to manually create the configuration files, we can use a Tailwind command.

npx tailwindcss init -p

This will create two new files in the root directory.

• tailwind.config.js
• postcss.config.js

note The command is not npm but rather npx which allows us to run local package commands.

The Tailwind config file that’s generated will be minimal. If you want to scaffold the full default configuration to Tailwind’s config file, add the --full flag to the command.

npx tailwindcss init --full

3. Define template and framework files in the main configuration:

We need to tell Tailwind where to find our files and which types of files we’re using. We do this in the content array in the tailwind.config.js file.

We’ll add the index.html and any files in the /src/ folder with the .vue/js/ts/jsx/tsx extensions.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Adding the Tailwind directives to a master CSS file:

Tailwind separates its styles in three different “layers” (a concept comes from the ITCSS paradigm).

1. base
2. components
3. utilities

We need to add these three layers to a master /src/tailwind.css file by using the @tailwind @tailwind directives.

note The file can be stored anywhere in the project, just make sure to update the import statement with the correct path.

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

tip We can also add custom styles to this file if necessary.

5. Import the master CSS into our main.js file:

At this point Tailwind is installed and ready to use. One last step is to import it into our /src/main.js file so that our project has access to the classes.

import { createApp } from 'vue'
import App from './App.vue'
// Import the master CSS file
import '../index.css'

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

It doesn’t need to be registered or anything, just imported.

That’s all we need to do to manually set up Tailwind with our Vue project.

How to style a component with Tailwind

Tailwind provides us with predefined classes that we can add to elements and so compose the style of our components.

<element class="tailwind-class"></element>

The classes can do simple things like change a border color or more complex CSS styling like defining an element’s width at certain breakpoints .

For our example, we’ll simplify the HelloWorld component that generated with the project to make it easier to focus on the styling.

It will only define the msg prop and output it in the template inside an H1.

<template>
  <h1>
    {{ msg }}
  </h1>
</template>

<script>
export default {
  props: { msg: String }
}
</script>

To start let’s change the background color of the heading to a dark blue and the text color to white. We’ll also add a padding of 1rem on all sides.

<template>
  <h1 class="bg-blue-900 text-white p-4">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  props: { msg: String }
}
</script>

If we run the example in the browser, we should see the heading span across the page with a blue background, white text and some small padding.

Now let’s say we want to change the background color when a user hovers over the heading. To do that we can use state modifiers .

<element class="modifier:tailwind-class"></element>

Because we generated a full config when we added the plugin, variants like hover should already be defined.

For the example, we’ll add the modifier and change the background color to red.

<template>
  <h1 class="bg-blue-900 text-white p-4 hover:bg-red-900">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  props: { msg: String }
}
</script>

If we run the example and mouse over the heading, the background should change to dark red.

Most of the components in the app will be composed of elements with classes like the examples.

Further Reading

For more information on the topics covered in this lesson, please see the relevant sections below.

• Official Tailwind Documentation .
• Tutorials on Youtube from the creator.
• Interactive Playground .
• Active Community on Github .
• Discord with more than 10,000 members.