How_to_Tailwind.css_in_Vue.js.md

Tailwind.css + Vue.js

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 component HelloWorld is imported:

  • import HelloWorld from './components/HelloWorld.vue';
    import './assets/scss/main.scss';

• open file postcss.config.js and add tailwindcss 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.

Colors

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.