Блог

Я работаю в react с typescript и tailwindcss.

Я хочу, чтобы вместо использования директивы @apply в основном файле tailwind.css (файл, который содержит базу @tailwind, компоненты @tailwind и т. Д.) Я хотел использовать ее в любом файле .scss.

Например, в react всякий раз, когда я создаю компонент, я создаю папку, а внутри нее я создаю файл index.tsx и файл .scss. Я хочу использовать директиву @apply в этом файле .scss. Таким образом, будет легко работать и отлаживать, потому что оба связанных файла будут находиться в одной папке. Как я могу этого добиться??

Я показал свою базовую структуру папок ниже.

Структура папок:

src> components> Header> 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> компоненты> Заголовок> Header.module.scss

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

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

 

Создал репозиторий с рабочим решением.
Если ваш проект основан на create-react-app , выполните следующие действия для достижения этого.

Добавьте tailwind в свой проект

Добавьте tailwind в свой проект, следуя этому руководству из документации. Примечание: они используются craco для изменения конфигурации CRA webpack, но я уверен, что вы можете сделать то же самое с react-app-rewired .

Шаги:

• npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
• npm install @craco/craco
• Внесите эти изменения в свой package.json
  
• создайте файл с именем craco.config.js

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

• npx tailwindcss-cli@latest init
• внесите эти изменения в tailwind.config.js
• включить tailwind в свой index.scss

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

Добавить поддержку модулей scss

Добавьте поддержку модулей scss, установив npm i node-sass@5.0.0 . Вы можете попробовать другие версии, но более высокие версии для меня не работали.

Вот и все

Если по какой-то причине он по-прежнему не работает для вас, см. Раздел repo для определения разницы в версиях / конфигурации, чтобы получить представление о том, что нужно изменить, чтобы справиться с этим.

Если вы используете пользовательскую сборку webpack (или ваш проект не основан на CRA), могут потребоваться дополнительные шаги для работы с taildwind и scss-modules .

Почему postcss@7?

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

Начиная с версии 2.0, CSS Tailwind зависит от PostCSS 8. Поскольку PostCSS 8 всего несколько месяцев, многие другие инструменты в экосистеме еще не обновлены, что означает, что вы можете увидеть подобную ошибку в своем терминале после установки Tailwind и попытки скомпилировать ваш CSS:

Ошибка: плагин PostCSS tailwindcss требует PostCSS 8.

Приложение Create React пока не поддерживает PostCSS 8, поэтому вам необходимо установить сборку Tailwind CSS v2.0 для совместимости с PostCSS 7, как мы показали выше.

Похоже, для достижения того, что вы ищете, вам нужно использовать postcss-import плагин и настроить основной файл tailwind немного по-другому. Я сделал очень быстрое репозиторий, чтобы продемонстрировать настройку:

Ссылка на репозиторий

Официальные документы по этому вопросу

По сути, вместо того, чтобы просто иметь этот «типичный» css-файл tailwind:

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

Вам нужно добавить зависимость разработчика от postcss-import пакета. Затем обновите postcss.config.js чтобы на самом деле использовать его:

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

И измените основной файл css для tailwind, чтобы вместо этого использовать импорт:

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

Таким образом, вы можете начать создавать отдельные css-файлы / модули и использовать их так, как вы хотели.

Вот Header.modules.css:

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

Я не уверен, что лично предпочитаю этот способ, потому что я предполагаю, что суть tailwind специально не использует кучу классов компонентов css, поэтому вместо этого я определенно предпочитаю просто создавать компоненты React с почти «встроенным» стилем:

 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;
 

Таким образом, я могу переопределить стиль по умолчанию в месте использования.

Итак, альтернативный способ сделать это, было бы что-то вроде этого:

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>
  );
}