Here is the tailwind.config.ts file I need to add in my project, but in tailwind v4 I have no tailwind.config.ts file. Please tell me a fix to solve this problem.

I have been trying to use Aceternity UI and it requires this tailwind.config.ts file. I could not find any solution to this.

const svgToDataUri = require("mini-svg-data-uri");

const colors = require("tailwindcss/colors");
const {
  default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    // rest of the code
  },
  plugins: [
    addVariablesForColors,
    function ({ matchUtilities, theme }: any) {
      matchUtilities(
        {
          "bg-grid": (value: any) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="; viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
            )}")`,
          }),
          "bg-grid-small": (value: any) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="; viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
            )}")`,
          }),
          "bg-dot": (value: any) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="; viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
            )}")`,
          }),
        },
        { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
      );
    },
  ],
};

function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );

  addBase({
    ":root": newVars,
  });
} ```

Here is the tailwind.config.ts file I need to add in my project, but in tailwind v4 I have no tailwind.config.ts file. Please tell me a fix to solve this problem.

I have been trying to use Aceternity UI and it requires this tailwind.config.ts file. I could not find any solution to this.

const svgToDataUri = require("mini-svg-data-uri");

const colors = require("tailwindcss/colors");
const {
  default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    // rest of the code
  },
  plugins: [
    addVariablesForColors,
    function ({ matchUtilities, theme }: any) {
      matchUtilities(
        {
          "bg-grid": (value: any) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3./2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
            )}")`,
          }),
          "bg-grid-small": (value: any) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3./2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
            )}")`,
          }),
          "bg-dot": (value: any) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3./2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
            )}")`,
          }),
        },
        { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
      );
    },
  ],
};

function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );

  addBase({
    ":root": newVars,
  });
} ```

• css
• reactjs
• next.js
• tailwind-css

2 Answers 2

I managed to make this work using the @plugin directive. In the src folder, I created a plugins folder and added two files: "add-var-color.ts" and "create-grid.ts".

create-grid.ts

import svgToTinyDataUri from 'mini-svg-data-uri'
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'

export default function createGrid({ matchUtilities, theme }: any) {
    matchUtilities(
      {
        'bg-grid': (value: any) => ({
          backgroundImage: `url("${svgToTinyDataUri(
            `<svg xmlns="http://www.w3./2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
          )}")`,
        }),
        'bg-grid-small': (value: any) => ({
          backgroundImage: `url("${svgToTinyDataUri(
            `<svg xmlns="http://www.w3./2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
          )}")`,
        }),
        'bg-dot': (value: any) => ({
          backgroundImage: `url("${svgToTinyDataUri(
            `<svg xmlns="http://www.w3./2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
          )}")`,
        }),
      },
      { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
    )
 }

add-var-color.ts

export default function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme('colors'))
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  )

  addBase({
    ':root': newVars,
  })
}

now in your globals.css you can add that as plugin

@plugin "../plugins/add-var-color.ts";
@plugin "../plugins/create-grid.ts";

after the @import 'tailwindcss';

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