How to Configure your Vue js app to use Tailwind CSS

A simple guide on how to make use of TailwindCSS inside your next Vue project

Photo credit: Andre Madarang

What is TailwindCSS?

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. 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. On the flip side, it also has no opinion about how your site should look and doesn’t impose design decisions that you have to fight to undo.

Basically, Tailwind gives you total control over how your websites and doesn't come bundled with “junk” you wouldn't be needing in your project.

Let's proceed to make use of Tailwindcss in our vue project.

Create a new Vue project

Open your terminal and type the following commands

vue init myProjectName if you are using Vue 2 CLI or vue create myProjectName for Vue 3

cd myProjectName to change into the project directory.

Install tailwind using npm

npm install tailwindcss --save-dev

or using yarn

yarn add tailwindcss --dev

Create a Tailwind.js configuration file

Type the following to create a tailwind.js configuration file

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

or

npx tailwind init tailwind.config.js --full

Configuring PostCSS

Create a postcss.config.js file touch postcss.config.js

Then proceed to configure Postcss to process tailwind, Do that by adding the following code to your postcss.config.js file

postcss.config.js file

Remove all tailwind configurations from package.json

Delete the following lines of code from thepackage.json file

Create a CSS file

Navigate to src/assets/cssand create a new tailwind.css file in yourcssfolder, then add the following

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

Import Tailwind into your vue app

Open your main.js file and add :

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

Test That it works

Edit the file named Helloworld.vue in the views folder and add the following between the template tag:

You should get something like:

Next Step?

Proceed to create awesome stuff!💪💪

Thank you for reading this far. If you enjoyed this post, please share, comment, and press that 👏 a few times (up to 50 times). . . Maybe it will help someone.

Follow me on Twitter and Medium if you’re interested in more in-depth and informative write-ups like these in the future!