The NEW CSS-first configuration with Tailwind CSS v4 (No more tailwind.config.js)

Summary

In this video, the creator explains the significant changes introduced in Tailwind CSS version 4, especially the shift from the `tailwind.config.js` file to a CSS-first configuration approach. The tutorial covers how content, plugin, prefix, and theme configurations now work directly within your CSS file, automating much of the setup. Key changes include simplified content handling, importing plugins directly into CSS, and modifications to how prefixes and themes are managed. Tailwind 4 aims for a more streamlined, CSS-centric workflow, making it crucial for users to adapt to the new setup for future projects.

Takeaways

• 😀 Tailwind CSS version 4 removes the need for a 'tailwind.config.js' file, instead focusing on a CSS-first approach for customization.
• 😀 The content section, which previously listed paths to HTML and JavaScript files containing Tailwind classes, is now fully automated in version 4.
• 😀 Plugins must now be imported directly into the global CSS file (e.g., 'index.css') rather than in the 'tailwind.config.js' file.
• 😀 Prefix customization has changed in version 4, and prefixes are now defined in the CSS file using the 'prefix' directive with a colon (':') separating the prefix from the class name.
• 😀 The theme section is no longer configured in 'tailwind.config.js'; instead, customization is done in the global CSS file using the 'theme' directive.
• 😀 The 'theme' directive in version 4 allows you to define custom breakpoints and colors as CSS variables.
• 😀 The naming conventions for customization have changed in version 4, with 'screens' now called 'breakpoints' and 'colors' now referred to as 'color'.
• 😀 In version 4, customizations that would have overwritten default settings in previous versions are now done using the 'extend' section of the 'theme' directive in the CSS.
• 😀 For theme customizations, you can add new variables or overwrite existing ones by defining them in the 'theme' section of your CSS file.
• 😀 Tailwind version 4 provides an easier and more streamlined approach to working with plugins and configurations directly within the CSS file, reducing the need for additional configuration files.

Q & A

What is the biggest change in Tailwind CSS version 4?

The biggest change in Tailwind CSS version 4 is the removal of the `tailwind.config.js` file. Instead, customizations and configurations are now handled directly within the CSS file.

What is the role of the `tailwind.config.js` file in previous versions?

In previous versions, the `tailwind.config.js` file was used to configure paths for content files, customize the theme, register plugins, and set options like prefixes and dark mode.

How does the content configuration work in Tailwind CSS version 4?

In version 4, the content section is fully automated. Tailwind automatically detects all the content files that contain Tailwind class names, eliminating the need for manual configuration.

How are plugins imported in Tailwind CSS version 4?

In version 4, plugins are imported directly into the global CSS file instead of the `tailwind.config.js` file. You simply use the `@import` directive at the top of your CSS file to include plugins like Daisy UI.

What should you do to install and use Daisy UI with Tailwind CSS version 4?

To use Daisy UI with Tailwind version 4, you need to install Daisy UI first and then import it into your global CSS file using the `@import` directive. Ensure that you use Daisy UI version 5, which is compatible with version 4 of Tailwind.

How are prefixes configured in Tailwind CSS version 4?

In Tailwind version 4, prefixes are configured in the global CSS file, not in the `tailwind.config.js` file. You define the prefix by adding a `prefix` rule in your CSS file, like `prefix: 'tww:'`.

What is the difference in handling prefixes between Tailwind CSS version 3 and version 4?

In version 3, prefixes were set in the `tailwind.config.js` file and used with a dash (e.g., `tww-`). In version 4, prefixes are defined in the CSS file and must be followed by a colon (e.g., `tww:`).

How is the theme section customized in Tailwind CSS version 4?

In version 4, theme customizations like breakpoints and colors are handled using CSS variables within the `theme` directive in the global CSS file. This replaces the need for the `extend` section that was used in previous versions.

How can you redefine breakpoints in Tailwind CSS version 4?

To redefine breakpoints in Tailwind version 4, you use the `theme` directive in your global CSS file and define new CSS variables for the breakpoints. You can also set them to 'initial' if you want to completely replace the default breakpoints.

What naming convention changes occurred between Tailwind CSS version 3 and version 4?

In version 4, several configuration keys have changed names. For example, `screens` in version 3 is now `breakpoints` in version 4, and `colors` in version 3 is now `color` in version 4.