TailwindCSS integration

[nileshtrivedi]

Would be great to have instructions on using Tailwindcss with this boilerplate in the right way (with postcss for purging).

[NekitCorp]

Hi, I don’t want to add Tailwind CSS to the boilerplate itself, because I want to leave the boilerplate as minimally small as possible so that everyone can add the technology they need in the future. But, there is an example of a branch with added tailwind in the next discussion: #18 (reply in thread)

https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate/tree/tailwindcss

[devhandler]

even if i directly add
import "../tailwind.css";
to overlay.svelte (the component content script uses), it still doesnt work.

[nileshtrivedi]

That works. Thank you for building this.

[devhandler]

the tailwind works for popups and options. could you share how to make it work for content scripts? @NekitCorp
i added import "../tailwind.css"; to index.ts in content folder (just like that in popup folder), but it doesn't work

[NekitCorp]

Hello, how did you write by adding import "../tailwind.css"; to src/content/index.ts looks sufficient.

import Overlay from "../components/Overlay.svelte";
import { storage } from "../storage";

// Content scripts
// https://developer.chrome.com/docs/extensions/mv3/content_scripts/

// Some global styles on the page
import "./styles.css";
import "../tailwind.css";

// Some JS on the page
storage.get().then(console.log);

// Some svelte component on the page
new Overlay({ target: document.body });

Try reloading the extension and restarting the extension build.

[devhandler]

i added exactly the same

import Overlay from "../components/Overlay.svelte";
import { storage } from "../storage";

// Content scripts
// https://developer.chrome.com/docs/extensions/mv3/content_scripts/

// Some global styles on the page
import "./styles.css";
import "../tailwind.css";

i also removed dist/ and rerun npm run dev and added red border to overlay, which doesn't work (border-8 and border-red-400):

<script lang="ts">
    import { onMount } from "svelte";
    import { storage } from "../storage";
    import Options from "./Options.svelte";
    let count = 0;

    onMount(() => {
        storage.get().then((storage) => (count = storage.count));
    });
</script>

<div class="border-8 border-red-400">
    <Options {count} />
</div>

after trying several times, seems the content overlay has some unpredictable response to tailwind changes (e.g., changing width, padding, etc.), but most of time, it doesn't have any change. while popup responds correctly with all tailwind changes

[NekitCorp]

Oh, I got it, there is a problem with HMR in content script with Tailwind. The problem is also in the package: crxjs/chrome-extension-tools#671

Try this workaround, it worked for me: crxjs/chrome-extension-tools#671 (comment)

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./src/**/*.{svelte,js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
    safelist: process.env.NODE_ENV === "development" ? [{ pattern: /./ }] : [],
};

Hope this helps you!

[devhandler]

thank you!