New Tailwind theme

[jaredpalmer]

💥 Proposal

This may be belong in the Infima repo, but I strongly suggest Docusaurus consider Tailwind. Tailwind already solves for theming out of the box. It also gives developers much more freedom. You can still re-implement Infima's core classes with tailwind, so this actually wouldn't need to be a breaking change.

The benefits:

• Smaller CSS footprint
• Better theming
• Less custom CSS needed on other pages

Next Steps

• Start on a new Tailwind preset
• Get it to feature-parity with classic theme

Have you read the Contributing Guidelines on issues?

Yes

[cemerick]

@kvnxiao's (revised/edited) recipe in https://github.com/facebook/docusaurus/issues/2961#issuecomment-735355912 works quite well (better to snoop around in the Discord4J project they linked IMO to see how everything is laid out), with the addition that @tailwind entries need to be added to one's custom.css file, e.g.

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

This is standard fare for a tailwind project ofc, but I neglected to do this at first (I guess I thought postcss would somehow roll things up without those rules), and so thought the tailwind+docusaurus integration wasn't working for a while.

[rjvim]

I have setup Tailwind recently on Docusaurus 3.5, here is the commit: https://github.com/betalectic/website/commit/55a5c53f07eefb4e4068ab19de1df5950dd4a405

Thanks to various contributors above.

• Preflight is loaded using Injection
• Dark theme is working

cc @Abhishek-Beta

---

Change on 16th Oct, need to add following before for before/after of tailwindcss to work

In plugin use the latest tailwind preflight file:

injectHtmlTags() {
  return {
    headTags: [
      {
        tagName: "link",
        attributes: {
          rel: "stylesheet",
          href: "https://unpkg.com/tailwindcss@3.4.14/src/css/preflight.css",
        },
      },
    ],
  };
},