es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede agregar hojas de estilo de ant design con tailwind en Rails 7.

28 Jul, 2023 Programación

Creé una aplicación Rails 7 utilizando rails new demo -j esbuild --css tailwind.
Estoy utilizando el paquete antd para los componentes y quiero usar la hoja de estilos de ant design junto con la hoja de estilos de tailwind.

Tailwind tiene una forma de agregar hojas de estilos externas a sus estilos por defecto. Utilicé eso y configuré el archivo application.tailwind.css de la siguiente manera:

@import "~antd/dist/antd.css";

@import “tailwindcss/base”;
@import “tailwindcss/components”;
@import “tailwindcss/utilities”;

Ahora, cuando ejecuto ./bin/dev, los estilos de antd no se aplican y esas clases de estilos no están presentes en el archivo app/assets/builds/application.css generado.

Parece que tailwind sobrescribe los estilos de ant design.

Si mantengo el archivo application.tailwind.css y agrego

import 'antd/dist/antd.css';

a mi archivo raíz index.js, solo entonces se aplican los estilos de antd y están presentes en el archivo app/assets/builds/application.css generado. Pero luego las clases de tailwindcss se eliminan.

¿Cómo puedo tener tanto los estilos de ant design como los estilos de tailwind juntos en el archivo app/assets/builds/application.css generado?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para tener tanto los estilos de Ant Design como los estilos de Tailwind juntos en el archivo app/assets/builds/application.css generado, puedes seguir los siguientes pasos:

    1. Crea un nuevo archivo llamado styles.css en el directorio app/assets/stylesheets/.

    2. En styles.css, agrega el siguiente código:

    @import "antd/dist/antd.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
    1. En application.css, elimina las declaraciones de importación existentes y reemplázalas con:
    *= require styles

    1. En index.js, elimina la línea import 'antd/dist/antd.css'; si está presente.

    2. Ejecuta tu aplicación y los estilos deberían combinarse correctamente.

Comments are closed.