Set up Tailwind CSS for your Vue.js app

Sharmila S
May 10 · 3 min read

In this article, I am gonna help you config your vue.js application to start using tailwind classes in your components.

  • Tailwind is a CSS framework that has lots of predefined styles for us to design faster.
  • Vue.js is a very popular front-end framework written in javascript.

If you don't have Vue CLI installed in your system, install it using npm. (Visit this website to download npm and node)

$ npm install -g @vue/cli
vue installed

Now, let’s create a new vue.js app using vue create <app-name>

$ vue create vuejs-tailwind-app

You will be prompted with the following, select vue2 or vue3 whichever version you are comfortable with, and press Enter.

After your app is successfully created, go to the folder and run the app using npm run serve

$ cd vuejs-tailwind
$ npm run serve

By default, Vue app runs on localhost in port 8080

Click on the link http://localhost:8080/ to view our app.

Now, let's install the dependencies required to work with Tailwind.

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

Then, to generate config files, type the following command

$ npx tailwindcss init -p

Open your app in your favorite editor.

  • In the tailwind.config.js file,
    - replace purge: []
    - with purge: [‘./index.html’, ‘./src/**/*.vue,js,ts,jsx,tsx}’]
  • Under the src folder create index.css and add the following.
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  • In the main.js file, import index.css
main.js

Congratulations! You can now start applying tailwind styles in your Vue.js app.

If you want to use styled form fields in your app, you have to install the module separately.

npm install @tailwindcss/forms

Then, in tailwind.config.js, add require('@tailwindcss/forms') for plugins.

Now we shall try creating a simple login page, with three components: navbar, login container, and a footer.

Components

Now that we have all the components ready, let’s import these into our App.vue

Run the app and go to http://localhost:8080 on your browser.

Final product

Now it’s your time to put your own twist on your app with easily usable tailwind classes.

Github link — https://github.com/SharmilaS22/medium-vuejs-tailwind-setup

Happy Learning!

featurepreneur

Features for everyone!