Стили Tailwind через переменные className не работают в React Native ⇐ CSS

[Anonymous]

Я использую
"nativewind": "^2.0.11" в качестве "зависимостей"
и
"tailwindcss": "^3.3.2" ", как "devDependities"
Обычные операции стилизации CSS с использованием попутного ветра работают нормально. Однако у меня возникли проблемы с передачей классов CSS, объединенных в константы JavaScript. Иногда это работает, иногда нет.
Вот полный сценарий.
Я,
определите некоторые константы в файле ./assets/style/style.js, например:

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

export const text__title = 'mb-1 text-xl font-poppins-semibold'
export const text__gray = 'mb-2 font-poppins text-sm text-neutral-400 leading-4'
export const text__inputLabel = 'text-xs font-poppins-semibold mb-1 text-fasteezy-300'

Импортируйте их в компонент ignore.tsx:

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

import * as twStyle from '@/assets/style/style'

И используйте его в стилизованных и/или простых элементах View и Text:

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

Forgot Password
Please enter the email you would like your password reset information sent to.
{name}

Но ничего не работает, и все остается понятным.


Однако, если я добавляю стили непосредственно в теги, они, похоже, работают. См. ниже:

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

Forgot Password
Please enter the email you would like your password reset information sent to.
{name}

Вот содержимое Tailwind.config.js

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

/** @type {import('tailwindcss').Config} */
const colors = require("./theme/colors")
module.exports = {
content: [
"./app/*.{js,jsx,ts,tsx}",
"./app/**/*.{js,jsx,ts,tsx}",
"./app/**/**/*.{js,jsx,ts,tsx}",
"./components/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
"./components/**/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors,
fontFamily: {
"poppins": ["PoppinsRegular"],
"poppins-medium": ["PoppinsMedium"],
"poppins-bold": ["PoppinsBold"],
"poppins-semibold": ["PoppinsSemiBold"],
"poppins-light": ["PoppinsLight"],
"poppins-black": ["PoppinsBlack"],
}
}
},
plugins: [],
}

И ./theme/colors.js

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

module.exports = {
'fasteezy': {
100: '#cffafe',
200: '#a5f3fc',
300: '#FFC670',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
}

печать console.log непосредственно перед возвратом компонента функция печатает их нормально:

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

console.log(twStyle.view__frmrow)
console.log(twStyle.view__inputwrap)
console.log(twStyle.text__inputLabel)
...
output...
LOG  mb-3.5 content-center justify-center
LOG  px-3 py-2 border rounded-lg border-slate-200
LOG  text-xs font-poppins-semibold mb-1 text-fasteezy-300

Передача констант в className работала со вчерашнего дня, но сегодня я внес изменение в color.js, чтобы изменить значение цвета 300, и оно внезапно перестало работать.Вот результат попутного ветра
Есть идеи, что я делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/787 ... eactnative