How to integrate Tailwindcss into a VUE CLI 3 project's web component?

Question

Here is what I have:

A VUE ClI 3 Project with lots of components and stuff going on.

What I need:

Is a way to reuse this project and to include it on my client's website very simple. I am thinking of just adding one JS file and maybe a little HTML snippet.

What I have done:

I have been using VUE CLI 3 to export my project as a web component. This is working great because now I just have to use one JS file and the web component tag I created.

The Problem:

The problem is that everything I have styled with Tailwindcss in my project is not being styled inside the web component, because these styles seem to be not included.

Normally you would include your styles in every Vue component itself. (I am using .vue single components) But since I am using TailwindCSS, I used a lot of classes on my HTML tags. This is working fine in my VUE CLI 3 project because I am using PostCSS for TailwindCSS. But it is not working anymore when I create the web component. I also don't have like an outputted CSS file. I only have my tailwind.css file:

@tailwind preflight;
@tailwind components;


// my custom styles

@tailwind utilities;

My question:

So how I can get the TailwindCSS styles, as wells my custom CSS styles into the web component?

try to use <style src="./yourCsslib.css" lang="scss" scoped> </style> in your single file component — Boussadjra Brahim

Clinton Yeboah Clinton Yeboah · Accepted Answer · 2018-09-23T18:45:53

I'm sure some of these steps will be redundant to you, but I want to through all of them to avoid any confusion:

Make sure you're in the root folder of your project:

Install Tailwind CSS: npm install tailwindcss --save-dev
Create a Tailwind config file: ./node_modules/.bin/tailwind init tailwind.js This will create a tailwind configuration file called tailwind.js in the root of your project.
Create a tailwind.css (you could give it any name you want) file. I usually put this file in assets/css/tailwind.css. In this file, add the configuration rules you specified in your question. You don't have to worry about including your custom css styles in this file for now.
Open your package.json file and create a new script in the script section: copy paste this: "tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css".

Every time you run npm run tailwind, the tailwind will be compiled and put into a css file called output.css.

"scripts": {
    "tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css",
    "serve": "npm run tailwind && vue-cli-service serve",
    "build": "npm run tailwind && vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"

  },

If you want to add your own custom styles, create a styles.css (can use any name) and place this file also in assets/css/styles.css
Now lets include these css files into our components:

Open your App.vue file.

In the styles section, import the files:

<style lang="scss">
  @import "./assets/css/output";
  @import "./assets/css/styles";
</style>

Done.

How to integrate Tailwindcss into a VUE CLI 3 project's web component?

1 Answers