Just a quick post to show you how to add Tailwind CSS to your Vue.js app if you're not familiar with things about Webpack and Vue-loader.
If you'd like to clone the example app, check out my repo on GitHub.
Vue.js CLI
Use the Vue CLI to generate a basic Vue.js app. Install it if you haven't already.
npm install -g @vue/cli
# OR
yarn global add @vue/cli
The package name changed from
vue-cli
to@vue/cli
. If you have the previousvue-cli
package installed globally, you need to uninstall it first withnpm uninstall vue-cli -g
oryarn global remove vue-cli
.
You can check you have the right version (@vue/cli
) with this command:
vue --version
Create a Basic Vue.js App
Run the create command of the Vue CLI. This will generate a basic Vue.js app. You'll be prompted with some options. When asked, you can select the defaults (I don't know what they all do yet anyway) or include the --default
option to skip the prompts.
vue create tailwind-vue-app
This command generates a basic Vue.js app into a new directory tailwind-vue-app
. It also runs npm install
(or yarn
) so you've no need to do that. You can now change into the new directory and check it all runs okay.
Change into the app directory like so.
cd tailwind-vue-app
Run the application with this command.
npm run serve
# OR
yarn serve
Now running, you can check out your basic hello-world Vue.js app, which is probably running at localhost:8080.
Install Tailwind CSS as a Dependency
Before using Tailwind CSS in the app, install it as a dependency and configure it.
npm install tailwindcss
# OR
yarn add tailwindcss
Configure Vue.js for Tailwind CSS
Webpack (and Vue-loader which is a Webpack loader for Vue.js components) can be configured to use PostCSS which is a Webpack loader for CSS.
It will look for the configuration inside a postcss.config.js
file and can build the app with CSS from packages you add.
The demo app generated by Vue CLI doesn't create a postcss.config.js
file by default. Do that now using your editor or this command.
touch postcss.config.js
And, configure it using this code.
// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
Add Tailwind CSS to a CSS Asset
The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include Tailwind CSS, create a CSS asset using your editor or the commands below.
# mkdir -p for making parents they don't exist
mkdir -p src/assets/styles/
touch src/assets/styles/index.css
Now add this code, which adds the various packages of the Tailwind CSS library.
/* src/assets/styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Edit the src/main.js
file as shown here, adding an import line to include the new index.css
stylesheet asset.
import Vue from 'vue'
import App from './App.vue'
+
+ import './assets/styles/index.css';
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Drop-In Tailwind CSS Components
To show it's working as expected, now you can effectively drop-in components straight from the Tailwind CSS component library. For example, replace the Vue.js logo with a responsive header navbar by following these steps:
First, create a new empty component file called Nav.vue
either using your editor or this command.
touch src/components/Nav.vue
Next, inside src/components/Nav.vue
, create the component with this code.
<template>
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Docs
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Examples
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
Blog
</a>
</div>
<div>
<a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Nav'
}
</script>
Everything outside of the <nav>
element is the makings of a standard static Vue component, <template></template>
and <script></script>
for containing the markup and the export respectively. The <nav>
element is a copy and paste straight from the Tailwind CSS responsive header navigation component.
Now, edit the src/App.vue
component and make the following changes.
<template>
<div id="app">
- <img alt="Vue logo" src="./assets/logo.png">
+ <Nav class="mb-6" />
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <HelloWorld msg="Welcome to Your Vue.js App" class="text-center"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
+ import Nav from './components/Nav.vue'
export default {
name: 'App',
components: {
- HelloWorld
+ HelloWorld,
+ Nav
}
}
</script>
- <style>
- #app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
- }
- </style>
You even delete the blob of CSS in the component. There was nothing wrong with it, but you can achieve the same results using pre-defined classes available from Tailwind CSS.
With that change saved, check out your app and it should look something like this 👇
This little guide is just something quick I picked up for a larger series I'm working at the moment!
Fork or clone my example GitHub repo, and let me know what you think 👇
Top comments (8)
Thank you for the tutorial, try to change from >>
/* src/assets/styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
to this ( if you have problem related to postcss-import )
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Reference : tailwindcss.com/docs/installation
can't compile, error with Postcss 8:
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
github.com/postcss/postcss/wiki/Po...
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
What about adding purge CSS? Can you show me how? And also does it work with SCSS?
Purging unused CSS is now baked into tailwind, one line and done.
Docs: tailwindcss.com/docs/controlling-f...
I did try but, does it work with dart-sass and Typescript?>
thank you a lot for this tutorial. I am a Vue and Tailwind begginer and I really apprecieted your explications! Bravo
Thanks for this tutorial. Really helpful