Hacer las clases de Tailwind no globales (¡automáticamente!)

Tengo una aplicación compuesta por dos partes:

(A) una aplicación heredada (AngularJs) con sus propias clases CSS.

(B) un div que contiene una aplicación completamente nueva (React). B está construido con webpack, postcss y Tailwind.

¿Puedo asegurarme de que las clases de Tailwind de B no se vean afectadas por las hojas de estilo de A y viceversa, sin realizar cambios significativos en la base de código?

Soluciones Incorrectas

Encontré dos posibles soluciones que requieren grandes cambios:

Entiendo que Tailwind tiene una opción de configuración de prefijo, pero preferiría no poner prefijos a literalmente miles de clases (especialmente considerando que el prefijo es más largo que el nombre de la clase en sí).

Usar css-modules con importaciones locales. Tampoco me gusta este enfoque, ya que:

(i) No estoy seguro de cómo funcionaría con Tailwind, y
(ii) incluso si funciona, preferiría no tener que importar localmente desde todo tipo de lugares, ya que hace que las cosas sean mucho más verbosas:
- por ejemplo, className="x" ... className="y" se convierte en:
- import s1 from 's1'; import s2 from 's2'; ... className="s1.x" ... className="s2.y"

Enfoques Relevantes Adicionales

Encontré dos plugins postcss adicionales relevantes, pero son insuficientes:

postcss-rename es genial, pero no arregla los nombres en los archivos *.js.

purgecss puede encontrar clases según su presencia en archivos *.js y luego eliminarlas de la lista de clases de salida, pero no permite cambiarles el nombre.

Específicamente, descubrí que la característica faltante más crucial parece ser el analizador de archivos *.js de purgecss. Ninguna otra solución parece tener eso todavía.

Problema sin Resolver

¿O estoy equivocado? ¿Hay alguna solución para aplicar una transformación personalizada (por ejemplo, cambiarle el nombre) a todas las clases postcss, que también se apliquen a los nombres de clase de salida de los elementos HTML/JSX? ¿O hay alguna otra forma de hacer que webpack automáticamente haga que mis clases CSS no entren en conflicto?

davy.ai

June 17, 2023 at 7:10 am

Posible solución

Una posible solución es utilizar CSS Modules en la nueva aplicación React (B). De esta manera, las clases CSS definidas en B estarán limitadas a los componentes en los que se utilizan y no afectarán a las clases CSS definidas en A.

Para utilizar CSS Modules en B, puedes configurar webpack para usar el css-loader con la opción modules establecida en true. Esto generará nombres únicos para cada clase CSS en B, que no se solaparán con las clases CSS en A.

Por ejemplo, en el archivo de configuración webpack para B, puedes agregar lo siguiente:

{
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
}

Luego, en tus componentes React en B, puedes importar y utilizar las clases CSS de esta manera:

import styles from './styles.css';

function Component() {
  return <div classname="{styles.myClass}">Hola, mundo</div>;
}

Esto asegurará que myClass esté limitada a Component y no se solapará con ninguna clase CSS en A.

Ten en cuenta que si necesitas utilizar Tailwind en B, aún puedes utilizarlo con CSS Modules importando y utilizando sus clases utilitarias en los estilos de tus componentes. Por ejemplo:

import styles from './styles.css';
import tw from 'tailwindcss';

function Component() {
  return (
    <div classname="{`${styles.myClass}" ${tw`bg-red-500="" text-white`}="" p-4`}="">
      Hola, mundo
    </div>
  );
}

Esto generará un nombre de clase único para myClass y aplicará las clases utilitarias de Tailwind a ella, sin afectar ninguna clase CSS en A.

Answer

davy.ai

June 17, 2023 at 7:10 am
Posible solución

Una posible solución es utilizar CSS Modules en la nueva aplicación React (B). De esta manera, las clases CSS definidas en B estarán limitadas a los componentes en los que se utilizan y no afectarán a las clases CSS definidas en A.

Para utilizar CSS Modules en B, puedes configurar webpack para usar el css-loader con la opción modules establecida en true. Esto generará nombres únicos para cada clase CSS en B, que no se solaparán con las clases CSS en A.

Por ejemplo, en el archivo de configuración webpack para B, puedes agregar lo siguiente:
```
{
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
}
```
Luego, en tus componentes React en B, puedes importar y utilizar las clases CSS de esta manera:
```
import styles from './styles.css';

function Component() {
  return <div classname="{styles.myClass}">Hola, mundo</div>;
}
```
Esto asegurará que myClass esté limitada a Component y no se solapará con ninguna clase CSS en A.

Ten en cuenta que si necesitas utilizar Tailwind en B, aún puedes utilizarlo con CSS Modules importando y utilizando sus clases utilitarias en los estilos de tus componentes. Por ejemplo:
```
import styles from './styles.css';
import tw from 'tailwindcss';

function Component() {
  return (
    <div classname="{`${styles.myClass}" ${tw`bg-red-500="" text-white`}="" p-4`}="">
      Hola, mundo
    </div>
  );
}
```
Esto generará un nombre de clase único para myClass y aplicará las clases utilitarias de Tailwind a ella, sin afectar ninguna clase CSS en A.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?