🧩 Plasmo Developers•16mo ago

Using Tailwind with Plasmo affects website styling

I am trying to use tailwindcss, but when I use it, it affects existing styling in the website. I have a src/style.css file:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

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

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

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

If I comment this out, the issue is fixed, so I know it's because of tailwind. I am using a prefix for Tailwind, so it shouldn't affect anything on the page. tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{tsx,html}"],
  prefix: 'plasmo-',
  darkMode: "media",
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{tsx,html}"],
  prefix: 'plasmo-',
  darkMode: "media",
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Any suggestions?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Using Tailwind with Plasmo affects website styling