Классы Tailwind из моей библиотеки на NPM не принимаются

Лучшее решение — использовать директиву @apply в стилях вашего компонента для применения классов Tailwind из вашего проекта.

Если в вашем проекте есть пользовательская цветовая схема, определенная в вашей конфигурации Tailwind, вы можете использовать директиву @apply, чтобы применить эти цвета к стилям вашего компонента, например:

.btn {
  @apply bg-purple-500 text-white;
}

Это гарантирует, что компонент будет использовать пользовательские цвета из вашего проекта вместо цветов Tailwind по умолчанию.

другой вариант — использовать директиву Tailwind @layer в CSS-файле вашего компонента. Это позволит вам переопределить любые классы Tailwind, импортированные из библиотеки, используя пользовательские цвета вашего проекта или другие настройки.

Если в вашей библиотеке есть компонент под названием «MyButton», который использует класс Tailwind bg-blue-500, вы можете переопределить его в CSS-файле вашего проекта следующим образом:

@layer components {
  .bg-blue-500 {
    background-color: red; // Use your project's custom color instead of Tailwind's default blue.
  }
}

этот компонент будет использовать собственные цвета вашего проекта вместо цветов Tailwind по умолчанию. но это будет работать только с классами, импортированными из библиотеки. Если вы используете в своих компонентах собственные классы или встроенные стили, директива @layer не повлияет на них.

Новый ответ

Теперь я понимаю ваш вопрос. И, честно говоря, я не могу придумать простого решения этой проблемы. Tailwind не следует графу зависимостей, поэтому вам придется указать путь так, как вы делаете сейчас.

Если существует несколько таких модулей, из которых вы хотите извлечь стили, вы можете написать функцию, которая добавляет путь за вас. Это в некоторой степени улучшит DX.

function getPathToModule(moduleName) {
    return `node_modules/${moduleName}/*.{js,ts,jsx,tsx,mdx}`
}

Старый ответ

Когда вы создадите свою библиотеку компонентов, вы получите отдельный результат .css, который объединяет весь CSS, необходимый вашей библиотеке. Вы можете просто импортировать этот файл CSS в свое приложение, и стили будут работать.

// App.tsx
...
import 'my-library/styles.css'
...

Если вы хотите, чтобы стили библиотеки были изолированы от стилей по умолчанию, простым решением было бы изменить все классы в библиотеке с помощью некоторого префикса. Tailwind предоставляет эту конфигурацию префикса , которую вы можете использовать для этой цели. Эта конфигурация префикса будет в конфигурации вашей библиотеки, а не в фактической конфигурации приложения. Это просто изменит классы вашей внутренней библиотеки, а классы в вашем приложении не будут затронуты. Никакой сложной конфигурации для переопределения классов здесь не требуется, поскольку имена классов разные (с префиксом). Поэтому конфликтов не будет.

При импорте библиотеки вам также необходимо импортировать файл CSS, который создается Tailwindcss при сборке проекта, и который вы можете увидеть в папке build или dist.

import { MyLibrary } from 'my-library

import 'my-library/dist/style.css'

Чтобы сделать файл CSS импортируемым, в package.json добавьте экспорт файла CSS.

"exports": {    
  ".": {
    "import": "./dist/my-library.es.js"
   },
  "./dist/style.css": {   <--- add this
    "import": "./dist/style.css"
   }
},

Вы можете увидеть пример из этой библиотеки npm репозиторий github