CODEWITHSUNDEEP
cssreactjstailwind-cssvitetailwind-css-4
miyen
miyen

Reputation: 71

How to setting Tailwind CSS v4 global class?

I started a new project using the latest Vite and Tailwind. In version 4.0, I couldn't find the tailwind.config.js file, which made me confused about how to configure global types.

Especially the container class, no appears in the documentation for version 4.0, and testing it's values did affect the layout, so it wasn't removed. Now, I want to set its max-width after the xl breakpoint , but I'm not sure how to do that.

Also, how can I add some custom classes with RWD and hover?

Upvotes: 7

Views: 8197

Answers (1)

rozsazoltan
rozsazoltan

Reputation: 9073

TailwindCSS v4 is backwards compatible with v3

Using a JavaScript config file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

@config "../../tailwind.config.js";

The configuration setting has changed by default. However, you have the option to declare the location of your tailwind.config.js file using a relative path in your default CSS file so you can use it again.

New configuration option in v4

CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript.

With TailwindCSS v4, you have the option to omit the tailwind.config.js file. You can find many new directives, such as @theme, which allows you to declare your custom settings directly in your CSS file, or @plugin, which lets you import TailwindCSS v4-compatible plugins directly in your CSS file.

I won't list all the new directives, but you can check them out here:

Customizing your theme

If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the @theme directive in your CSS:

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

Learn more about customizing your theme in the theme variables documentation.

@plugin

Use the @plugin directive to load a legacy JavaScript-based plugin:

@plugin "@tailwindcss/typography";

The @plugin directive accepts either a package name or a local path.

Upvotes: 9

Related Questions