The Short Answer

To fix the “Classes Not Working” issue in Tailwind, ensure that your configuration file is properly set up and that the purge option is correctly configured to include the necessary CSS classes. This can typically be achieved by updating the tailwind.config.js file to include the correct paths and settings.

Why This Error Happens

• Reason 1: The most common cause of this issue is an incorrect or incomplete configuration in the tailwind.config.js file, particularly in the purge section, which determines what CSS classes are included in the final build. For example, if the purge option is set to an empty array, no CSS classes will be included, resulting in the “Classes Not Working” error.
• Reason 2: An edge case cause of this issue is when using a custom build process or a third-party plugin that modifies the Tailwind configuration, potentially overriding the purge settings and causing the error. This can happen when using tools like Webpack or Rollup with custom configurations.
• Impact: The impact of this error is a failed CSS build, resulting in a non-functional or partially functional application, as the necessary CSS classes are not being generated.

Step-by-Step Solutions

Method 1: The Quick Fix

1. Go to tailwind.config.js > module.exports and locate the purge option.
2. Toggle the purge option to include the necessary paths, for example: purge: ['./src/**/*.html', './src/**/*.js'].
3. Refresh the page or re-run the build process to apply the changes.

Method 2: The Command Line/Advanced Fix

To fix the issue using the command line, you can update the tailwind.config.js file to include the correct purge settings and then run the following command:

1

npx tailwindcss -i ./src/input.css -o ./src/output.css --purge ./src/**/*.html,./src/**/*.js

This command will rebuild the CSS file with the correct classes included.

Prevention: How to Stop This Coming Back

To prevent this issue from happening again, it’s essential to follow best practices for configuring Tailwind, including:

• Keeping the tailwind.config.js file up-to-date and well-organized.
• Regularly reviewing the purge settings to ensure they are correct and include all necessary paths.
• Monitoring the build process and CSS output to catch any issues early.

If You Can’t Fix It…

[!WARNING] If Tailwind keeps crashing or you’re unable to resolve the “Classes Not Working” issue, consider switching to Bootstrap, which handles CSS configuration and build processes natively without these errors.

FAQ

Q: Will I lose data fixing this? A: No, fixing the “Classes Not Working” issue in Tailwind should not result in any data loss, as it only involves updating the configuration file and rebuilding the CSS.

Q: Is this a bug in Tailwind? A: The “Classes Not Working” issue is not a bug in Tailwind itself, but rather a configuration issue that can occur when setting up the purge option. This issue has been present in various forms since Tailwind version 2.0, and the recommended solution has been updated in the latest version (3.0) to include more detailed documentation and examples.

📚 Continue Learning

Check out our guides on Tailwind and Classes Not Working.