Using Tailwind with Vue CLI 3
Tailwind is a utility CSS framework which allows you rapidly build custom user interfaces. Custom being the keyword here.
If I’m building an admin / app / mvp / prototype I whip out the latest Bulma and start building my UI as quickly and efficiently as possible. However, sometimes we have to build to a design, which may not align with a UI Kit like Framework7, Bulma or bootstrap.
Tailwind, does not make any assumptions about you design, so you essentially start from scratch, but can rapidly achieve custom designs with utility classes.
package.json to configure PostCSS, the
.postcssrc.js is totally ignored.
Here are the steps to have everything working together:
Step 1: Create the project
vue create tailwindcss
Step 2: Create your CSS file
I created mine at
src/main.css (next to
Before getting started please note, many of the features that make Tailwind CSS great are not available using the CDN…tailwindcss.com
Step 3: Include the CSS file somewhere in your JS
This can be in
Step 4: Configure PostCSS
tailwindcss as a plugin for PostCSS: