---
title: tailwindcss
---

# tools.tailwindcss

- **Type:** `Object | Function`
- **Default:**

```js
const tailwind = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './config/html/**/*.{html,ejs,hbs}',
    './storybook/**/*',
  ],
};
```

Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/configuration).

### Enabling Tailwind CSS

Before using `tools.tailwindcss`, you need to enable the Tailwind CSS plugin for Modern.js.

Please refer to the section [Using Tailwind CSS](/guides/basic-features/css/tailwindcss) for instructions on how to enable it.

### Function Type

When `tools.tailwindcss`'s type is Function, the default tailwindcss config will be passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.

```ts title="modern.config.ts"
export default {
  tools: {
    tailwindcss(config) {
      config.content.push('./some-folder/**/*.{js,ts}');
    },
  },
};
```

### Object Type

When `tools.tailwindcss`'s type is `Object`, the config will be shallow merged with default config by `Object.assign`.

```ts title="modern.config.ts"
export default {
  tools: {
    tailwindcss: {
      plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/typography'),
      ],
    },
  },
};
```

### Notes

Please note:

- If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
- If you are using the `source.designSystem` configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.

The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.

### About source.designSystem

`source.designSystem` is a deprecated configuration option in Modern.js.

Starting from Modern.js vMAJOR_VERSION.33.0, you can use the `theme` configuration option of Tailwind CSS as a replacement for `source.designSystem`. It is no longer necessary to split the `theme` configuration and set it on `designSystem`.

- Previous usage:

```ts title="modern.config.ts"
const { theme, ...rest } = tailwindConfig;

export default {
  tools: {
    tailwindcss: rest,
  },
  source: {
    designSystem: theme,
  },
};
```

- Current usage:

```ts title="modern.config.ts"
export default {
  tools: {
    tailwindcss: tailwindConfig,
  },
};
```
