eslint-plugin-tailwind-enforcer

ESLint rules to enforce the use of TailWind's className prop for styling in React projects, discouraging the use of StyleSheet.create() and inline style props.

🚀 Installation

First, install the plugin from npm:

npm install --save-dev eslint-plugin-tailwind-enforcer
# or
yarn add --dev eslint-plugin-tailwind-enforcer

⚙️ Usage

Add tailwind-enforcer to the plugins section of your .eslintrc.js configuration file.

You can use the recommended configuration which enables the rule with a warn level:

// .eslintrc.js
module.exports = {
  // ... your existing config
  plugins: [
    // ... other plugins
    "tailwind-enforcer", // Add the plugin here
  ],
  extends: [
    // ... other extends
    "plugin:tailwind-enforcer/recommended", // Use the recommended config
  ],
  rules: {
    // You can override the severity here if needed
    "tailwind-enforcer/no-react-styles": "error", // Example: make it an error instead of a warning
  },
  // ...
};

Or, enable the rule manually:

// .eslintrc.js
module.exports = {
  // ... your existing config
  plugins: [
    // ... other plugins
    "tailwind-enforcer", // Add the plugin here
  ],
  rules: {
    "tailwind-enforcer/no-react-styles": "warn",
    // Or "error", depending on your preference
  },
  // ...
};

📝 Rules

no-react-styles Disallows StyleSheet.create() and the style prop on JSX elements.

Message ID for StyleSheet.create(): noStyleSheetCreate Message ID for style prop: noStyleProp

Incorrect example on ReactNative (using StyleSheet):

import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: { flex: 1 },
  text: { color: 'red' }
});

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={{ fontSize: 16 }}>Hello</Text>
    </View>
  );
}

Correct example (using NativeWind):

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

function MyComponent() {
  return (
    <View className="flex-1">
      <Text className="text-red-500 text-base">Hello</Text>
    </View>
  );
}

🤝 Contributing

Feel free to open issues or submit pull requests.