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.
3.x
Default content
When using Tailwind CSS 3.x
, the default content of the main.css
file is as follows:
@tailwind base;
@tailwind components;
@tailwind utilities;
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:
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
/* @import 'tailwindcss/preflight.css' layer(base); */
@import 'tailwindcss/utilities.css' layer(utilities);
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
You can enable the Preflight on your project by uncommenting the @import 'tailwindcss/preflight.css' layer(base);
line in the main.css
file.
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);@import 'tailwindcss/utilities.css' layer(utilities);
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 */
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:
/* 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:
/* ... */
@config './tailwind.config.js';
/* ... */