Question

0

565

Vistas

¿Cómo usar la directiva @apply de tailwind en cualquier archivo .scss en lugar de usar solo el archivo principal de tailwind (en React)?

Estoy trabajando en reaccionar con mecanografiado y tailwindcss.

Lo que quiero es que en lugar de usar la directiva @apply en el archivo principal tailwind.css ( el archivo que contiene la base @tailwind, los componentes @tailwind, etc. ), quiero usarlo en cualquier archivo .scss.

Por ejemplo, en reaccionar cada vez que creo un componente, creo una carpeta y dentro de ella creo un archivo index.tsx y un archivo .scss. Quiero usar la directiva @apply en ese archivo .scss. De esta manera, será fácil de trabajar y depurar porque ambos archivos asociados estarán dentro de la misma carpeta. ¿Cómo puedo lograr eso?

He mostrado mi estructura básica de carpetas a continuación.

Estructura de carpetas:

src > componentes > Encabezado > Encabezado.tsx

 import React from "react"; import styles from "./Header.module.scss"; interface Props {} const Header: React.FC<Props> = (props) => { return <div className={styles.headerTag}>Header part here</div>; }; export default Header;

src > componentes > Encabezado > Encabezado.módulo.scss

 // what to import so that I can use tailwind like this .headerTag { @apply text-8xl font-bold bg-gray-500; }

over 4 years ago · Santiago Trujillo

3 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-04-01T19:37:34.056Z

Creó un repositorio con una solución de trabajo.
Si su proyecto se basa en create-react-app siga los pasos a continuación para lograrlo.

Agregue viento de cola a su proyecto

Agregue viento de tailwind a su proyecto siguiendo esta guía de la documentación. Nota: usan craco para modificar la configuración del paquete web de CRA, pero estoy seguro de que puedes hacer lo mismo con react-app-rewired .

Pasos:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @craco/craco
Realice estos cambios en su paquete.json
crea un archivo llamado craco.config.js

 // craco.config.js module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }

npx tailwindcss-cli@latest init
haga estos cambios en tailwind.config.js
incluir viento de tailwind en su index.scss

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

Agregar soporte de módulos scss

Agregue soporte para módulos scss instalando npm i node-sass@5.0.0 . Puede probar otras versiones, pero las versiones superiores no me funcionaron.

Eso es todo

Si todavía no funciona para usted por alguna razón, consulte el repositorio de versiones/diferencias de configuración para tener una idea de qué cambiar para manejarlo.

Si está utilizando una compilación de paquete web personalizado (o su proyecto no está basado en CRA), es posible que se necesiten más pasos para trabajar con taildwind y scss-modules .

¿Por qué postcss@7?

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

A partir de la versión 2.0, Tailwind CSS depende de PostCSS 8. Debido a que PostCSS 8 tiene solo unos meses, muchas otras herramientas en el ecosistema aún no se han actualizado, lo que significa que es posible que vea un error como este en su terminal después de instalar Tailwind y tratando de compilar su CSS:

Error: el complemento de PostCSS tailwindcss requiere PostCSS 8.

La aplicación Create React aún no es compatible con PostCSS 8, por lo que debe instalar la compilación de compatibilidad Tailwind CSS v2.0 PostCSS 7 por ahora, como se muestra arriba.

Answer 2 · 2022-04-01T19:37:34.408Z

Parece que para lograr lo que busca, necesita usar un postcss-import y configurar el archivo de viento de cola principal de manera ligeramente diferente. Hice un repositorio muy rápido para demostrar la configuración:

Enlace de repositorio

Documentos oficiales sobre el tema.

Básicamente, en lugar de solo tener este archivo css de viento de cola "típico":

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

Debe agregar una dependencia de desarrollo en el paquete postcss-import . Luego actualice postcss.config.js para usarlo realmente:

 module.exports = { plugins: { "postcss-import": {}, tailwindcss: {}, autoprefixer: {}, }, }

Y cambie el archivo CSS principal para que Tailwind utilice las importaciones en su lugar:

 @import "tailwindcss/base"; @import "tailwindcss/components"; @import "./components/Header/Header.module.css"; @import "tailwindcss/utilities";

De esta manera, puede comenzar a crear archivos/módulos css separados y usarlos como quisiera.

Aquí está Header.modules.css :

 .headerTag { @apply bg-green-500 text-8xl; }

Personalmente, no estoy seguro de preferirlo de esta manera, porque supongo que la esencia del viento de cola es específicamente no usar un montón de clases de componentes css, por lo que definitivamente prefiero crear componentes React con un estilo casi "en línea":

 import React from "react"; interface Props { className: string; } const Header: React.FC<Props> = (props) => { return <div className={`bg-green-500 text-8xl ${props.className}`}>Header part here</div>; }; export default Header;

De esta manera, puedo anular el estilo predeterminado en el lugar de uso.

Answer 3 · 2022-04-01T19:37:34.700Z

Entonces, una forma alternativa de hacer esto, sería algo como esto:

styles/apply.js

 const btn = 'py-2 px-4 font-semibold rounded-lg shadow-md'; const btnGreen = 'text-white bg-green-500 hover:bg-green-700'; export { btn, btnGreen };

pages/index.tsx

 import type { NextPage } from 'next'; import { btn, btnGreen } from 'Styles/apply'; const Home: NextPage = () => { return ( <div> <button className={`${btn} ${btnGreen}`}> Button </button> </div> ); }

0

565