File: main.css

When you need to add truly custom CSS rules to the project, the easiest approach is to just add the custom CSS into the main.css file. It acts as the primary stylesheet reference for Tailwind CSS when it creates the styles.

To customize the main.css file, you can go to WindPress menu and switch to main.css file editor.

The main.css file editor

`3.x`

Default content

When using Tailwind CSS 3.x, the default content of the main.css file is as follows:

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

You can reset the main.css file to its default by clearing its contents and clicking the Save Changes button.

`4.x`

Default content

When using Tailwind CSS 4.x, the default content of the main.css file is as follows:

main.css

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
/* @import 'tailwindcss/preflight.css' layer(base); */
@import 'tailwindcss/utilities.css' layer(utilities);

You can reset the main.css file to its default by clearing its contents and clicking the Save Changes button.

Preflight

Preflight styles are the base styles that normalize the browser styles to ensure a consistent look and feel across different browsers.

In Tailwind CSS 4.x, the Preflight styles can be enabled by importing the tailwindcss/preflight.css file into the main.css file.

Preflight disabled by default

Due to the nature of the normalizing styles, they can be intrusive and may affect the existing styles in your project. To deliver an experience that is seamless with the existing styles in your project, the Preflight styles are disabled by default in WindPress.

You can enable the Preflight on your project by uncommenting the @import 'tailwindcss/preflight.css' layer(base); line in the main.css file.

main.css

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);@import 'tailwindcss/utilities.css' layer(utilities);

Uncommented @import 'tailwindcss/preflight.css' layer(base); line

Importing additional CSS files

WindPress has a simple file system that allows you to create local custom CSS files and can be referenced in the main.css file using the @import at-rule with the relative path to the file (started with ./).

Additionally, if the path to the file is not an url or relative path, WindPress will try to resolve it as a npm package via esm.sh.

For example, you can create custom CSS files and import them into the main.css file as shown below:

/* this is Simple File System */
@import './theme/color.css';
@import './custom/avatar.css';
@import './custom/buttons.css';

/* this is CDN URL */
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';

/* this is npm package */
@import 'daisyui@alpha'; /* this will be loaded from https://esm.sh/daisyui@alpha/index.css */
@import 'open-props/buttons.min.css'; /* this will be loaded from https://esm.sh/open-props/buttons.min.css */

Importing additional CSS files

Tailwind CSS plugins

In the Tailwind CSS 4.x, a Tailwind CSS plugin can be added to the project by importing the plugin file into the main.css file using the @plugin directive.

The Tailwind CSS plugins can be added via CDN or local files.

With the WindPress' simple file system, you can create local custom Tailwind CSS plugins and import them into the main.css file with the relative path to the file (started with ./).

Additionally, if the path to the file is not an url or relative path, WindPress will try to resolve it as a npm package via esm.sh.

For example, you can add the @tailwindcss/typography and @tailwindcss/forms plugin to the project by importing the plugin file via the esm.sh, jsDelivr or Skypack CDN into the main.css file as shown below:

main.css

/* via esm.sh CDN */
@plugin 'https://esm.sh/@tailwindcss/typography'; 
@plugin '@tailwindcss/forms' { /* this will be loaded from https://esm.sh/@tailwindcss/typography */
    strategy: 'class';
}

/* via Skypack CDN */
@plugin 'https://cdn.skypack.dev/@tailwindcss/typography';
@plugin 'https://cdn.skypack.dev/@tailwindcss/forms' {
    strategy: 'class';
}

/* via jsDelivr CDN */
@plugin 'https://esm.run/@tailwindcss/typography';
@plugin 'https://esm.run/@tailwindcss/forms' {
    strategy: 'class';
}

Tailwind CSS configuration

In the Tailwind CSS 4.x, the Tailwind CSS configuration can be imported into the main.css file using the @config directive via CDN or local files.

With the WindPress' simple file system, you can create local custom Tailwind CSS configuration files and import them into the main.css file with the relative path to the file (started with ./).

The Tailwind CSS configuration supports the JavaScript package.

For example, you can customize the Tailwind CSS configuration by importing the tailwind.config.js file into the main.css file as shown below:

main.css

/* ... */

@config './tailwind.config.js';

/* ... */

Tailwind CSS Version

WindPress provides support for both major versions of Tailwind CSS

File: tailwind.config.js

Learn how to configure Tailwind CSS using the tailwind.config.js file