TL;DR: Use @config directive.

From v4 onwards, the use of the tailwind.config.js file has been removed, and CSS-first directives are provided for configuration. The init process, which previously generated this config file by default, has also been discontinued. If you want to use a JS-based config file from v4 onwards, you must create it manually and specify its location in CSS using the @config directive so that v4 can find the configuration.

• Changed npx tailwindcss to npx @tailwindcss/cli - TailwindCSS v4 Docs
• Removed npx tailwindcss init process - StackOverflow
• Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow
• CSS-first configuration instead of tailwind.config.js - TailwindCSS v4 Docs
• Use @config directive to legacy JavaScript-config - StackOverflow
• Automatic Source Detection - StackOverflow

TailwindCSS v4 is backwards compatible with v3

I see that you've created the old v3 legacy JavaScript-based configuration. In v4, this is no longer necessary due to the new CSS-first configuration, but you can still use it by adding an extra @config directive if needed.

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";

• Using a JavaScript config file - TailwindCSS v4 Update Guide

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:

• Functions and directives - TailwindCSS v4 Docs

As per the documentation:

Customizing your theme

Use the --animate-* theme variables to customize the animation utilities in your project:

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }
}

Now the animate-wiggle utility can be used in your markup:

<div class="animate-wiggle">
  <!-- ... -->
</div>

Thus, in the same vein, the animations would be defined in the CSS file like:

@import "tailwindcss";

@theme {
  --animate-typing: typing  2s steps(20) infinite alternate, blink .7s infinite;

  @keyframes typing {
    0% {
      width: 0%;
      visibility: hidden;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }
}

<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@theme {
  --animate-typing: typing  2s steps(20) infinite alternate, blink .7s infinite;

  @keyframes typing {
    0% {
      width: 0%;
      visibility: hidden;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }
}
</style>

<div class="animate-typing h-10 bg-red-500 border-r-10"></div>

New "CSS-first" configuration from v4 (instead of tailwind.config.js)

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

• Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?

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:

• Functions and directives - TailwindCSS v4 Docs

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.

• Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?
• Adding Custom Styles: Customizing your theme - TailwindCSS v4 Docs

@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.

• @plugin directive - TailwindCSS v4 Docs

Related questions/answers for new CSS-first theme handling:

• How to use custom color themes in TailwindCSS v4
• How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root
• When should I use * and when should I use :root, :host as the parent selector?
• Should I use @theme or @theme inline?
• How to switch to a CSS-first configuration in Tailwind CSS v4 and above

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";

• Using a JavaScript config file - TailwindCSS v4 Update Guide

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.

Install TailwindCSS with Aceternity UI

Unfortunately, after reviewing the Aceternity UI documentation, I see that they do not yet have an official guide for v4 support. Until the official version is released, you can experiment on your own. In the meantime, you can install TailwindCSS v3 by specifying the version like this:

npm install tailwindcss@3

• Install TailwindCSS v3 with Next.js - TailwindCSS v3 Docs

The documentation still incorrectly lists npm install tailwindcss, which has been installing v4 instead of v3 since January.

• Install Aceternity UI with TailwindCSS v3 - Aceternity UI Docs

TailwindCSS v4 with Next.js

Specifically for Next.js, the TailwindCSS team has published v4-compatible steps. I believe following these will help you achieve your goal:

• Install TailwindCSS v4 with Next.js - TailwindCSS v4 Docs

TailwindCSS v4 Configuration

From TailwindCSS v4 onwards, a CSS-first configuration has been introduced, and the legacy JavaScript-based tailwind.config.js configuration has been removed.

• CSS-first configuration - TailwindCSS v4 Blog
• Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow
• Automatic Source Detection from TailwindCSS v4 - StackOverflow
• Removed @tailwind directives - StackOverflow

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:

• Functions and directives - TailwindCSS v4 Docs

However, it is still possible to use the legacy JavaScript-based configuration with the @config directive, like this:

• @config directive - TailwindCSS v4 Docs
• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

./src/style.css

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