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) theme(static);
/* @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@beta'; /* this will be loaded from https://esm.sh/daisyui@beta/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';

Scanning additional Sources

Different implementation

The WindPress implementation of the @source directive in the main.css file is different from the original implementation of Tailwind CSS v4 and may not be compatible with it.

In the production environment, WindPress scan your project to create a single CSS file that includes only the styles that are used.

To scan additional source files, you can add the source files to the main.css file using the @source directive.

Currently, WindPress supports the following providers can be used to scan the source files:

File URL

A static file is added as the source using the file URL.

The pattern to add the source from the file URL is as follows:

main.css

@source "[file_url]";

The file_url is the URL of the file that you want to add as the source.

For example, you can add the source from the file URL using the @source directive as shown below:

main.css

@source "https://esm.sh/flowbite/dist/flowbite.min.js?raw";

jsDelivr CDN

Some of Tailwind CSS libraries may require you to scan their package content from the node_modules directory.

As WindPress run on the browser, it doesn't use the Node.js environment to scan the package content from the node_modules directory. To scan the package content from the node_modules directory, we can use the jsDelivr CDN which provides the package content via CDN.

The patern to scan the package content from the jsDelivr CDN is as follows:

main.css

@source "jsdelivr:[package_name][@version][/file_path]";

The package_name is the name of the package. The version is the version of the package. The file_path is the path to the file that you want to add as the source, it support the glob pattern.

For example, to scan the node_modules/preline/dist/*.js file from the preline package, you can add the source from the jsDelivr CDN using the @source directive as shown below:

main.css

@source "jsdelivr:[email protected]/dist/*.js";

wp-content directory

WindPress allows you to scan the source files from the wp-content directory of the WordPress installation.

The pattern to add the source from the wp-content directory is as follows:

main.css

@source "wp-content:[file_path]";

The file_path is the path to the file that you want to add as the source, it support the glob pattern.

For example, to scan our custom theme named my-theme from the wp-content/themes/my-theme directory for any php, html, twig, and js files as the source, you can using the @source directive as shown below:

main.css

@source "wp-content:themes/my-theme/**/*.{php,html,twig,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