Shows how to create a new Vue.js project with vue-cli 3 which uses Tailwind.css.
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. Tailwind is written in PostCSS and configured in JavaScript, which means you have the full power of a real programming language at your fingertips.
Tested with Vue.js 3.2.1 and Tailwind.css 0.7.3 (Januar 2019)
vue create my-project
(I used airbnb-eslint, scss and unit-testing )npm install tailwindcss
cd my-project
npx tailwind init tailwind.js
- create
src/assets/scss/main.scss
- paste code from tailwind doc in the file
main.scss
: Use Tailwind in your CSS - import the newly created file in
App.vue
directly after the componentHelloWorld
is imported:-
import HelloWorld from './components/HelloWorld.vue'; import './assets/scss/main.scss';
-
- open file
postcss.config.js
and addtailwindcss
to the list of plugins: -
module.exports = { plugins: { tailwindcss: './tailwind.js', autoprefixer: {}, }, };
- To try if everything is working as expected open
HelloWorld.vue
and add one of the Tailwind-classes to the first paragraph: -
<p class="bg-blue text-white">
- run
npm run serve
, open the URL in your browser (http://localhost:8080
) and you should see that the paragraph has a blue background and white text.
Please note: If you don’t want to use SCSS, you can use CSS instead. Create src/assets/css/main.css
then instead of src/assets/scss/main.scss
and change the import in the HelloWorld
-component accordingly.
Thanks to Andre Madarang for the video tutorial, which is a bit outdated.
The colors are defined in tailwind.js
and can be used in certain ways. E.g. taking a color green-light
you can use text-green-light
to color the text or bg-green-light
to color the background.
You can apply the pre-defined classes in your own classes to use a more semantic approach (e.g. using BEM):
<style scoped lang="scss">
h3 {
@apply .text-red-lightest;
margin: 40px 0 0;
}
</style>
Using @apply
might lead to warnings in your editor, because it is not valid scss, but after being processed through PostCSS it will work anyway.