CODEWITHSUNDEEP
react-nativeexpotailwind-cssnativewind
Kent Wood
Kent Wood

Reputation: 1522

does NativeWind support custom plugin defined in tailwind.config.js

my tailwind.config.js is like this

const plugin = require("tailwindcss/plugin");
module.exports = {
  plugins: [
    plugin(function ({ addUtilities}) {      
      addUtilities({
        ".heading3": {
          color: "#1F9D55",
          fontSize: "1rem",
          lineHeight: "26px"
        },
      });
    }),
  ],
};

then i try to use heading3 in somewhere like <Text className='heading3'>hello</Text>
however, it is not working.

then i try to use it in twrnc, which is another compine tools to work between tailwindcss and react-native. and i try to use like this <Text style={tw`heading3`}>hello</Text>
and it can work. but i prefer use the className way instead of style and tw function way.
so how NativeWind can support the class defined in custom plugin?

Upvotes: 0

Views: 193

Answers (1)

Adnir Andrade
Adnir Andrade

Reputation: 11

I had the same issue, and it was surprisingly hard to find a solution. In my case, it was a cache problem. Even though my plugin was correctly configured, I had to run the following command for the changes to be applied and recognized by NativeWind:

npx react-native --reset-cache

or

yarn start --reset-cache

After this step, I was able to use this utility with className.

I hope this helps!

Just in case, here is how my code ended up looking like:

// tailwind.config.js
const plugin = require("tailwindcss/plugin");
module.exports = {
  // Other configs
  plugins: [
    plugin(function ({ addUtilities}) {      
      addUtilities({
        ".elevate-1": {
          shadowOffset: { width: 0, height: 0 },
          shadowColor: "black",
          shadowOpacity: 0.2,
          shadowRadius: 4,
          elevation: 4
        },
      });
    }),
  ],
};

And then I called that in my application like this:

<View className="elevate-1 my-4 rounded-lg bg-white">

Upvotes: 0

Related Questions