heybourn / headwind

An opinionated Tailwind CSS class sorter built for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
MIT License
1.37k stars 46 forks source link

Support for tailwind-react-native-classnames package #165

Open Eliascm17 opened 2 years ago

Eliascm17 commented 2 years ago

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>
);
iangregsondev commented 2 years ago

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.

fuelkoy commented 2 years ago

Regex for headwind to work with twrnc package: "(?:\b(className|style)\s=\stw\\"\'\`[\\"\'\])|(?:\\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