🧩 Plasmo Developers•10mo ago

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.

8 Replies

ThomatoOP•10mo ago

How it looks when importing it into my popup

ThomatoOP•10mo ago

How it looks when importing component into options.tsx

ThomatoOP•10mo 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•10mo ago

Import the tailwind css file that declares the tailwind rules into options.tsx

ThomatoOP•10mo 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•10mo ago

@Thomato has reached level 1. GG!

ThomatoOP•10mo 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;

ThomatoOP•10mo 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.

Gaming

Programming

No styling for options.tsx