Member preview

Using Vue 3 with Tailwind.css

Tailwind is a aUtility-First CSS Framework for Rapid UI Development. Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it’s not a UI kit.

It doesn’t have a default theme, and there are no built-in UI components.

Creating a new Vue Project with Vue CLI 3

Vue CLI requires Node.js Version 8.9 or above (8.11.0+ recommended).

To install the vue package we can use npm or yarn as package manager by typing on of these commands:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

After installing vue we can check if we have the right version (3.x) installed by typing:

vue --version

Now we can create a new project named “project” with the following command:

vue create project
#Navigate into project folder
cd project

Installing Tailwind.css

Tailwind is available on npm and can be installed using npm or Yarn.

npm install tailwindcss --save-dev
# OR
yarn add tailwindcss --dev

Tailwind is configured almost entirely in plain JavaScript. To do this you’ll need to generate a Tailwind config file for your project. You can do this by creating a tailwind.js file in your project's root.

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

If this command fails, try using the following:

node ./node_modules/tailwindcss/lib/cli.js init tailwind.js

Create a tailwind.css file in src/assets/css

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Add tailwindcss as a plugin in your postcss.config.js file, passing the path to your config file:

var tailwindcss = require('tailwindcss');

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

Importing your tailwind.css in your Vue app by adding the following Code to your main.js file.

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

Let’s get started

Add the following code to you App.vue and it should show your a little card with an image of the Tailwind creator

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">Adam Wathan</p>
<p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
</div>
<div>
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
</div>
</div>
</div>
</div>

Running our development server

Type npm run serve in your console to run your local development Server. You can access it in your browser on localhost:8080

npm run serve

Your website should look like this:

Tailwind Docs and GitHub repository

Tailwind is every well documented, check out their documentation:

I made a public GitHub repository for you to use.

https://github.com/marienfeldtom/vue3-tailwind-starter/

Don’t forget to clap 👏 if you like this article.