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?

Answer 1

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:

1. Install Tailwind CSS: npm install tailwindcss --save-dev

2. 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.

3. 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.

4. 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"
    
  },

5. 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

6. 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>

Answer 2

Usually when you work with Vue and Tailwindcss, you only have to reference index.css once at main.js, like it says on the tailwind docs (https://tailwindcss.com/docs/guides/vite)

But when using custom web components, you have to reference tailwind again inside the custom component, as such:

<template>
  //...your custom web component 
</template>
    
<style lang="scss">
  @import url("../index.css");
</style> 

(on index.css)

@tailwind base;
@tailwind components;
@tailwind utilities;