PD
🧩 Plasmo DevelopersThomato

No styling for options.tsx

I have a basic options page written in TypeScript and styled via Tailwind CSS that displays perfectly within the popup. I saved all of the code to an OptionsPage.tsx, verified it displays fine, then used it in options.tsx: 
import React from 'react'
import OptionsPage from '~pages/OptionsPage'

const options = () => {
  return (
    <OptionsPage />
  )
}

export default options
import React from 'react'
import OptionsPage from '~pages/OptionsPage'

const options = () => {
  return (
    <OptionsPage />
  )
}

export default options
For some reason, the styling just does not display on that page.
Thomato
Thomato•68d ago
How it looks when importing it into my popup
No description
Thomato
Thomato•68d ago
How it looks when importing component into options.tsx
No description
Thomato
Thomato•68d ago
My tailwind.config.js: 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./**/*.tsx"],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./**/*.tsx"],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
It should be using Tailwind CSS styling for my whole project, but options.tsx appears to be the exception.
DunkinDeez
DunkinDeez•67d ago
Import the tailwind css file that declares the tailwind rules into options.tsx
Thomato
Thomato•67d ago
So I tried doing it as a regular import within options.tsx for "import ~style.css" (and the long way with ../../, etc.). When reloading the page, it says that CSS file is not found, even though it is right in the root of the src folder. Even tried using PostCSS import plugin so I could import CSS that way, but I'm having more issues than I should 😭
Arcane
Arcane•67d ago
@Thomato has reached level 1. GG!
Thomato
Thomato•67d ago
My src/style.css is the CSS file I assume you're telling me to import: 
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
Thomato
Thomato•67d ago
I have no idea why this import statement would work perfect in one file, but not the other. Options page doesn't even load with that line added since it can't find the file.
No description
No description
Want results from more Discord servers?
Add your server
More Posts
Shadcn dosnt seem to work in content script uiI have been trying to get Shadcn to work with CSUI. I followed almost everything from this server aswith-message exampleHow can I get with-message example to fully work? Including communication between tabs and content wHow to mock storageHey guys, im fairly new with plasmo. currently writing e2e tests with playwright. How can i properlytab page works with pnpm run dev but is blocked when i run pnpm build and pnpm packageWhen I upload my zipfile to plasmo itero, none of my users can access the tab page. however It workssupport for multiple assetstrying to do a simple toggle icon extension (click extension to toggle icon) but it seems like only Supabase url and anon key exposedI am a newbie exploring Plasmo for supabase authentication. The public url and anon keys are added iSupabase url and anon key exposedI am a newbie exploring Plasmo for supabase authentication. The public url and anon keys are added iFirefox dev server manifest warningsThe ```json { "content_security_policy": { "extension_pages": "script-src 'self' http://localhimport url no longer workingHey folks 👋🏻 just upgraded our extension at Attio to the latest version of Plasmo (0.85). It seemsCan't figure out how to navigate from my extention to my auth pageI'm trying to test a popup extension I made that has a button that is supposed to navigate to `http:Parallel dev serversI need to both run `plasmo dev --verbose` and `plasmo dev --verbose --target=firefox-mv3`, but when Absolutely! In Plasmo, to send a messageAbsolutely! In Plasmo, to send a message from a side panel to a content script in the main world, yoHow to sendToBackground from main worldi've try all of messaging method but background still not receive anythingHow to fetch current tab localStorage?How to use this storage Api in plasmo to to fetch the localStorage of the current open tab?. And whHow can I open the side panel programmatically?I am interested in opening the side panel programmatically by messaging the background script from t@Pallas#2819 I keep getting this error@Pallas I keep getting this error when I run `pnpm build`: "🟣 Plasmo v0.84.2 🔴 The Browser Extensibutton click inside CSUI closes the CSUIWhen I click on a button inside the injected CSUI, the whole component is closing. I am using a useebackground errorIm using the with background example, I don't see any console log on the service worker. How can I anyone got any good example of CSUI lifecycle?I have been going through the official docs back and forth but still having tough time to fully grasQuick screen changeHere is a simple code that i have developed. I was wandering how i can avoid the quick screen change