Theming portal howto

[rufuspollock]

We will want instructions (and examples) of theming a portal

When creating a new portal I want to develop a custom theme so that it looks great and aligns with my brand

When deploying a portal I want to be able to install different themes (and switch between them) so that I can quickly try out and theme my site with an existing theme

Research - theming in next.js

• CSS in NextJS https://nextjs.org/docs/basic-features/built-in-css-support
• https://github.com/vercel/next.js/tree/canary/examples/with-next-css
• https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

Use styled components ...

• https://styled-components.com/
• https://timellenberger.com/blog/dynamic-theming-with-styled-components-and-nextjs

[nyarly]

@rufuspollock I've just installed the CKAN example of Poral.JS, and I'm having trouble getting any styling changes to take. I've changed the HeroTemplate class to include bg-sky-50 (instead of bg-white and it seems to make no difference. It looks like Tailwind doesn't see the class to include it?

It's hard to tell exactly what's happening. I'm not new to front end development, but I haven't used Next or Tailwind before.

[nyarly]

I've added

  content: [
      "./pages/**/*.{html,js}",
      "./components/**/*.{html,js}"
    ],

to my tailwind.config.js; it doesn't seem to make a difference, despite yarn dev getting annoyed with me went I put mismatched quotes. I'm not seeing anything explicit about Tailwind in the output of yarn dev either - compiled / but nothing about styles.

[nyarly]

So that for sure wouldn't work, because Typescript. But adding tsx as an extension doesn't help either. I've even added e.g. ./components/home/HeroTemplate.tsx directly, and Tailwind still doesn't seem to see the file I'm looking at.

[rufuspollock]

@nyarly sorry to hear this still isn't working. When i have had similar experience with style changes not getting reflected it has related to something like this i.e. tailwind not processing the changes. One way to check is to inspect the built page in your web inspector to see if the styles are there. I'm guessing they are not ...

I'd also add jsx and tsx to your list of extensions in both components and pages for good measure.

[nyarly]

Thanks for your sympathy. I worked it out late Monday! First, the content key hadn't been set at all, so that was the first thing. Adding tsx helped as well. But the big issue was that Portal uses Tailwind 2, so the documented colors at https://tailwindcss.com/docs/customizing-colors#default-color-palette don't apply and Tailwind didn't recognize them.

With respect to reviewing styles in devtools, because of how PostCSS adds them in dev mode, there's one giant <style> tag, which has the whole Tailwind reset sheet before Chrome gives up, and makes the rest invisible.

I will say, this was not a great introduction to Tailwind, which I put at their doorstep. Central to the tailwind design is scanning text for class names and making them available only if they appear, which means that mis-matched classes for any reason is going to silently fail. Looking forward to being extremely sensitive to typos as I work on this project :)

[rufuspollock]

Great to hear it worked out 👍 🎉 and thanks for sharing!