Estalvia't unes hores!!! Aquí tens una guia pràctica per utilitzar tailwind css v4 a Docusaurus sense trencar els seus estils i amb consells reals per a producció.
Problema comú: tailwind inclou preflight que reinicia estils globals i pot xocar amb els estils del tema de Docusaurus. A més, les utilitats globals poden sobreescriure selectors propis i components del framework. La bona notícia és que hi ha diverses solucions netes i escalables.
Pas 1 Instal·lació bàsica i fitxers clau Instal·la tailwind css v4 juntament amb postcss i autoprefixer amb npm install -D tailwindcss@4 postcss autoprefixer i genera la configuració amb npx tailwindcss init -p. Això crea tailwind.config.cjs i postcss.config.cjs. Crea el fitxer d'estils globals src/css/custom.css i afegeix les directives @tailwind base; @tailwind components; @tailwind utilities;
Pas 2 Rutes de contingut Configura tailwind.config.cjs perquè analitzi els fitxers del teu lloc incloent components i fitxers mdx, per exemple content [./src/**/*.{js,jsx,ts,tsx,mdx}, ./docs/**/*.{md,mdx}] i si necessites incloure codi del theme afegeix ./node_modules/@docusaurus/theme-classic/src/**/*.{js,jsx,ts,tsx} per evitar que classes s'eliminin en purge o content stripping.
Pas 3 Evitar que preflight trenqui estils Opció A desactivar preflight a tailwind.config.cjs amb corePlugins { preflight false } Opció B utilitzar prefix per a totes les utilitats prefix tw- d'aquesta manera les classes tailwind no col·lisionen amb classes existents Opció C scoping amb important que pot ser un selector, per exemple important #__docusaurus perquè les utilitats només afectin l'arbre dins de l'id arrel de Docusaurus Cada opció té trade offs: desactivar preflight evita resets però perds normalització; prefix evita col·lisions però exigeix utilitzar prefixos a tot; important scopa estils sense renombrar classes i sol ser l'opció més pràctica per integrar sense trencar el theme.
Pas 4 Integració a Docusaurus Afegeix src/css/custom.css al preset classic de Docusaurus a la propietat customCss perquè es carregui amb el lloc. Si prefereixes càrrega inicial utilitza clientModules amb la ruta al teu fitxer css. Assegura't que l'ordre de càrrega és correcte si utilitzes altres estils globals: si vols que tailwind no reescrigui estils del theme carrega tailwind abans i utilitza preflight false o prefix; si vols que tailwind prevalgui carrega tailwind després o utilitza important selector.
Pas 5 Millor pràctica components utilitza css modules o estils en mòduls per a components React i evita dependre exclusivament d'utilitats globals per a estils molt específics. D'aquesta manera mantens compatibilitat amb actualitzacions del tema i redueixes riscos en actualitzar Docusaurus o tailwind.
PostCSS i ordre de plugins revisa postcss.config.cjs i verifica que tailwindcss i autoprefixer estiguin presents i en l'ordre correcte. Per a builds de producció comprova que el procés de purge o content trimming inclogui totes les rutes rellevants per evitar que classes útils siguin eliminades.
Comprovacions finals executa npm run start i npm run build revisa el lloc en diferents navegadors i mides de pantalla i utilitza eines d'inspecció per localitzar overrides inesperats. Si detectes conflictes prova a activar important selector temporalment per identificar la font de l'override.
Si vols una solució llesta per a producció considera aquestes recomanacions combinades: utilitza prefix per a utilitats globals en projectes grans, utilitza important amb un selector arrel per integrar ràpidament a Docusaurus i empra css modules per a components crítics. Amb aquestes mesures pots mantenir la potència de tailwind css v4 sense sacrificar la coherència del tema de Docusaurus.
A Q2BSTUDIO som especialistes a integrar tecnologies modernes i optimitzar temps de desenvolupament. Oferim desenvolupament de programari a mida i aplicacions a mida, consultoria en intel·ligència artificial i ia per a empreses, arquitectures segures i ciberseguretat, així com serveis cloud aws i azure. També entreguem serveis intel·ligència de negoci, solucions amb power bi, agents ia i projectes complets d'intel·ligència artificial per a empreses. Si necessites que integrem tailwind css v4 al teu lloc Docusaurus, o que desenvolupem programari a mida o aplicacions a mida amb garanties de seguretat i escalabilitat en cloud aws i azure, a Q2BSTUDIO podem ajudar-te a estalviar temps i evitar errors comuns.
Paraules clau per trobar els nostres serveis aplicacions a mida programari a mida intel·ligència artificial ciberseguretat serveis cloud aws i azure serveis intel·ligència de negoci ia per a empreses agents ia power bi.
