Tailwind 3, 2022’de Docusaurus 2’ye nasıl eklenir?

Docusaurus’u iş yerinde kullanıyoruz ve bu yıl v2’yi gönderirken hala (v2.3 itibariyle) herhangi bir Tailwind desteğiyle gönderilmedi. Google’da arama yaptım ve bu gönderiyi buldum; bu neredeyse ihtiyacım olan her şeydi, ancak çalışması için yorumlarda bazı şeyler gerekiyordu.

İşte o blog yazısından farklı olan gereksinimlerim:

• Tailwind’in CSS Sıfırlama, Ön Kontrol özelliğini etkinleştirmeyin, çünkü bu Docusuarus’un geri kalan stillerini siler
• Docusaurus’un karanlık modunu destekleyin

sadece benim için olumlu şekilde işe yarayan versiyonumu yazıyorum.

yarn add tailwindcss postcss autoprefixer
touch tailwind.config.js 

module.exports = {
  corePlugins: {
    preflight: false, 
  },
  content: ("./src/**/*.{js,jsx,ts,tsx}", "../docs/**/*.mdx"), 
  darkMode: ('class', '(data-theme="dark")'), 
  theme: {
    extend: {},
  },
  plugins: (),
}

ve ayrıca @tailwind şunları içerir:

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

// ...

bu kısım tam olarak blog yazısına göre:

    plugins:    (
                  
                  async function myPlugin(context, options) {
                    return {
                      name: "docusaurus-tailwindcss",
                      configurePostCss(postcssOptions) {
                        
                        postcssOptions.plugins.push(require("tailwindcss"));
                        postcssOptions.plugins.push(require("autoprefixer"));
                        return postcssOptions;
                      },
                    };
                  },
                ),

ve işin bitti.

test etmek, dönüştürmek /docs/whatever.md ile /docs/whatever.mdx ve bir React öğesi veya bileşeni ekleyin (MDX’te React bileşenlerini satır içi tanımlayabileceğinizi biliyor muydunuz? tuhaf ama işe yarıyor…)

export function Section() {
  return div className="bg-red-500 dark:bg-yellow-500">this is tailwind!div>
}

# Welcome to Docs

this works in light and dark mode

Section />

whoooo it works

Ön kontrol kapalı olduğundan bazı varsayımlar bozulur: