headwind icon indicating copy to clipboard operation
headwind copied to clipboard

Support for tailwind-react-native-classnames package

Open Eliascm17 opened this issue 3 years ago • 2 comments

Requesting future support for this npm package so that this extension works for a React Native project using this tailwind package.

Example:

import { View, Text } from 'react-native';
import tw from 'tailwind-react-native-classnames';

const MyComponent = () => (
  <View style={tw`p-4 android:pt-2 bg-red-300 flex-row`}>
    <Text style={tw`text-md tracking-wide`}>Hello World</Text>
  </View>
);

Eliascm17 avatar Aug 03 '21 21:08 Eliascm17

My exact question :-)

There is a regex to configure - but I am not sure 100% how it works..

But I am assuming with the right regex for "tsx" "jsx" files - then catching the tw`.....` . should be do-able.

iangregsondev avatar Sep 12 '21 00:09 iangregsondev

Regex for headwind to work with twrnc package: "(?:\b(className|style)\s*=\stw[\"\'\]([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'\\])|(?:\btw\s([_a-zA-Z0-9\\s\\-\\:\\/]*))" Must be added to "Settings>Extensions>Headwind>Class Regex>Edit in settings.json" and in there to whatever form you are using twrnc or other tailwind for react native packages

fuelkoy avatar Jun 20 '22 11:06 fuelkoy