Error: tailwindcss plugin function argument object prop "web" not implemented

[marijang]

i got error when using create

// lib/tailwind.js
import { create } from 'twrnc';

// create the customized version...
const tw = create(require(`../../tailwind.config.js`)); // <- your path may differ

// ... and then this becomes the main function your app uses
export default tw;

Error: tailwindcss plugin function argument object prop "web" not implemented

[martisj]

Error: tailwindcss plugin function argument object prop "web" not implemented, js engine: hermes [Component Stack]

Hermes engine related for you as well @marijang ?

[martisj]

Are you using nativewind @marijang ?

[gunhack]

Are you using nativewind @marijang ?

I'm having the same error. I have updated to nativewind 4.1.21.

I have tried

"overrides": { "tailwindcss": "3.4.17" },

but it doesn't works

This is my workarround:

module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './src/frontend/**/*.{js,jsx,ts,tsx}'],
  //presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
};

to remove the "presets" property on the tailwind.config.js, I'm not sure if is a good workarround but it works for me.
Also if I remove the twrnc it works ok without this...

EDIT:

I think this is a better aproach:

don't change the tailwind.config.js

module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './src/frontend/**/*.{js,jsx,ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
};

and only removed the presets from the create fn

import { create } from 'twrnc';
const tw = create({ ...require('../../../tailwind.config'), presets: [] });

export default tw;

[jaredh159]

are you trying to mix nativewind with twrnc? nativewind has a much broader goal of web support, which we do not aim to support, this library is only focused on pure native stuff, any aspect in which it also works for RN web is accidental, if that makes sense.

[jaredh159]

also, see: #335

[minzojian]

Same issue.​​

​​My situation:​​
I initially used NativeWind, which worked fine because I wanted to enhance the default Text component and set the lineHeight style as a multiplier.

However, NativeWind couldn't retrieve the transformed styles at runtime.

So, I switched to twrnc to get the transformed styles from Tailwind CSS classes. Then, I calculated the lineHeight value based on the fontSize extracted from classes like text-[16px].

I extended tailwind.config.js, similar to what ​​@marijang​​ did, but I encountered the same issue.

​​I still plan to keep using NativeWind​​—twrnc is just a small supplement. ​​If adding it comes at a high cost (e.g., significantly increasing bundle size), I might eventually have to explicitly specify fontSize instead.​

[minzojian]

i found it is because the tailwind.config.js contains setting like
presets: [require('nativewind/preset')],
i modify create code like this, issues gone

import tailwindConfig from '../../tailwind.config'

const tw = create({ theme: tailwindConfig.theme }) //require(`../../tailwind.config.js`))

export default tw

i answered here