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:
<!-- TOC -->
- Install Tailwind
- Create a configuration file
- Configure PostCSS
- Create a CSS file
- Import the file in your Vue app
- Testing it works fine
<!-- /TOC -->
In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.
First step is to install Tailwind, using npm or yarn:
# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev
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.
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.
Now create a CSS file in src/assets/css/tailwind.css
and add
@tailwind base;
@tailwind components;
@tailwind utilities;
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.
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.