web-dev-qa-db-fra.com

Comment utiliser @Apply Directive de Tailwind dans n'importe quel fichier .scss.

Je travaille dans Réagir avec TypeScript et Tailwindcs.

Ce que je veux, c'est que, au lieu d'utiliser @ appliquer Directive dans le fichier Main TailWind.css (( Le fichier que conatins @tailwind Base, @tailwind Composants, etc. ), je souhaite l'utiliser dans n'importe quel fichier .scss.

Par exemple, dans réagir chaque fois que je crée un composant, je crée un dossier et un fichier à l'intérieur, je crée un fichier index.tsx et un fichier .scss. Je souhaite utiliser @Apply Directive dans ce fichier .scss. De cette manière, il sera facile de travailler et de déboguer car les deux fichiers associés seront dans le même dossier. Comment puis-je atteindre ça ??

J'ai montré ma structure de base de base ci-dessous.

Structure de dossier :

SRC> Composants> Rubrique> Header.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> Composants> Rubrique> Header.MODULE.SSSS 

// what to import so that I can use tailwind like this

.headerTag {
  @apply text-8xl font-bold bg-gray-500;
}
reactjssasspreprocessortailwind-csspostcss
17
Ashutosh

Semble avoir réaliser ce que vous recherchez, vous devez utiliser un postcss-import Plugin et configurez légèrement le fichier de vent arrière principal. J'ai fait un repo très rapide pour démontrer la configuration:

Link repo

Docs officiels sur la question

Fondamentalement, au lieu de simplement avoir ce fichier "typique" CSS CSS:

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

Vous devez ajouter une dépendance Dev sur postcss-import paquet. Puis mettez à jour postcss.config.js Pour l'utiliser réellement:

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

Et modifier le fichier CSS principal pour le vent arrière pour utiliser les importations à la place:

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

De cette façon, vous pouvez commencer à créer des fichiers/modules de CSS séparés et d'utiliser comme vous le souhaitez.

Voici Header.Modules.css :

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

Je ne suis pas sûr que je préférais personnellement de cette façon, car je suppose que l'essentiel de l'embouché n'utilise pas spécifiquement pas de tas de classes de composants CSS, donc je préfère définitivement simplement créer React composants avec presque "en ligne " coiffant:

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 cette façon, je peux remplacer le style par défaut sur le lieu d'utilisation.

0
fxdxpz