Tailwind is a pretty cool CSS framework.
In this post I’m going to show you how to use Tailwind (v1.0.5) on a Vue app.
It’s 4 simple steps:
- Install Tailwind
- Create a configuration file
- Configure PostCSS
- Create a CSS file
- Import the file in your Vue app
- Testing it works fine
In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.
Install Tailwind
First step is to install Tailwind, using npm or yarn:
# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev
Create a configuration file
Next, use the Tailwind command that is provided to create a configuration file.
./node_modules/.bin/tailwind init tailwind.js
This will create a tailwind.js
file in the root of your project, adding the basic Tailwind configuration. The file is very long, and I won’t paste it here, but it contains lots of presets that will be very useful later.
Configure PostCSS
Now you need to tweak the PostCSS configuration to make sure Tailwind runs. Add:
module.exports = {
"plugins": [
require('tailwindcss')('tailwind.js'),
require('autoprefixer')(),
]
}
to your postcss.config.js
. Create one if it does not exist.
Note: if you set Vue CLI to store the configuration in package.json
, make sure no PostCSS configuration lies in that file. By default Vue CLI adds these lines:
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
remove them, or the postcss.config.js
file won’t be read.
Create a CSS file
Now create a CSS file in src/assets/css/tailwind.css
and add
@tailwind base;
@tailwind components;
@tailwind utilities;
Import the file in your Vue app
Import tailwind in main.js:
import '@/assets/css/tailwind.css'
(@
in vue points to src/
)
That’s it! Now restart your Vue CLI project and it should all work fine.
Testing it works fine
You won’t notice anything unless you add Tailwind-specific classes.
Try for example adding this HTML in one of your templates:
<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
Test
</div>
That should create a colored box.
Download my free Vue Handbook
More vue tutorials:
- An overview of Vue.js
- The Vue.js CLI: learn how to use it
- The Vue.js DevTools
- Configuring VS Code for Vue Development
- Create your first app with Vue.js
- Vue.js Single File Components
- Vue.js templates and interpolations
- Vue.js Directives
- Vue.js Methods
- Vue.js Computed Properties
- Styling Vue.js components using CSS
- Vue.js Watchers
- Vue methods vs watchers vs computed properties
- Vue.js Filters
- Vue.js Components
- Vue.js Slots
- Vue.js Component Props
- Vue.js Events
- Vue.js Components Communication
- Vuex, the Vue.js State Manager
- Vue, use a component inside another component
- Vue, how to use a prop as the class name
- How to use SCSS with Vue.js Single File Components
- Using Tailwind with Vue.js
- The Vue Router
- Dynamically show a Vue component
- The Vue.js Cheat Sheet
- Store Vue data to localStorage using Vuex
- How to dynamically apply a class using Vue
- Vue, how to use v-model
- Vue, why data must be a function
- Roadmap to become a Vue.js developer in 2020