Как обрабатывать @source для библиотеки пользовательского интерфейса React в производстве?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как обрабатывать @source для библиотеки пользовательского интерфейса React в производстве?

Сообщение Anonymous »

В настоящее время я создаю собственную библиотеку пользовательского интерфейса React (структуру monorepo), используя Tailwind CSS v4.
Во время разработки с помощью Storybook мои стили отображаются правильно только в том случае, если я явно указываю на исходные файлы с помощью директивы @source в моей точке входа CSS:

Код: Выделить всё

/* index.css */
@import "tailwindcss";
@import "@nuvra-ui/theme/styles.css";

/* This works in Storybook, but feels wrong for production */
@source "../../../packages/react/src/**/*.{js,ts,jsx,tsx}";
Проблема:
Когда я публикую библиотеку, конечный пользователь не будет иметь мою локальную структуру папок с исходным кодом. Если я удалю строку @source, стили Tailwind не будут созданы, поскольку Tailwind не знает, какие классы нужно «извлекать» из моих предварительно скомпилированных компонентов.
Моя цель:
Я хочу, чтобы пользователи @nuvra-ui могли использовать библиотеку без необходимости вручную добавлять путь node_modules моей библиотеки к своему собственному Tailwind config/CSS.
Вопрос:
Как лучше всего использовать библиотеку пользовательского интерфейса, чтобы гарантировать, что стили объединяются или обнаруживаются компилятором Tailwind потребителя?

Подробнее здесь: https://stackoverflow.com/questions/798 ... production
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»