Troubleshooting

Slow builds

Make sure your tailwind.config.js content only include the required files. You need to avoid broad content patterns, as it will process things like your node_modules.

Components are not being transformed

Make sure your tailwind.config.js content configuration is correct and matches all of the right source files.

A common mistake is missing a file extension, for example if you’re using jsx instead of js for your React components:

// tailwind.config.js
module.exports = {
  content: [
-   './src/**/*.{html,js}',
+   './src/**/*.{html,js,jsx}'
  ],
  // ...
}

Or creating a new folder mid-project that wasn’t covered originally and forgetting to add it to your configuration:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{html,js,jsx}',
    './components/**/*.{html,js,jsx}',
+   './util/**/*.{html,js}'
  ],
  // ...
}

Don't construct class names dynamically

The TailwindCSS compiler does not allow for dynamic class names. Use this pattern instead

- <Text className="text-{{ error ? 'red' : 'green' }}-600"></Text>
+ <Text className="{{ error ? 'text-red-600' : 'text-green-600' }}"></Text>

className is not passed to child components

The className prop is not passed to child components, it is transformed into a style object and passed via the style prop.

Undefined is not an object / Did you forget to export a component

This occurs when your tailwind.config.js content to too broad and includes node_modules/nativewind. You need to avoid broad content patterns, as it will process things like your node_modules

1.8 KiB Raw Permalink Blame History Unescape Escape