WindPress v3.2.29

File: main.css

Learn how to customize the main.css file, which serves as the styles entry point for Tailwind CSS 3.x in your project.

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.

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 clicking the (reset) icon in the top right corner of the editor.

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:

main.css
/* this is Simple File System */
@import './theme.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'; /* this will be loaded from https://esm.sh/daisyui/index.css */
@import 'open-props/buttons.min.css'; /* this will be loaded from https://esm.sh/open-props/buttons.min.css */