tailwind.css

/**
 * This file outputs to `style.css`, your main front-end style sheet, and to
 * `style-editor.css`, for the WordPress editor.
 *
 * You probably won’t need to edit this file. You’re more likely to want to
 * edit `./tailwind/tailwind-theme.css`, which contains your project’s custom
 * design tokens, or files in the `./tailwind/custom` folder.
 *
 * The comments in this file outline the intended usage for files in the
 * `./tailwind/custom` folder.
 */

/**
 * Add the WordPress file header.
 */
@import "./tailwind/custom/file-header.css";

/**
 * Add Tailwind’s default theme and your custom theme.
 */
@import "tailwindcss/theme";
@import "./tailwind/tailwind-theme.css";

/**
 * Add custom `@font-face` rules.
 */
@import "./tailwind/custom/fonts.css";

/**
 * Add Tailwind’s Preflight styles.
 */
@if $target != editor {
	@import "tailwindcss/preflight";
} @else  {
	/**
	 * In the editor, we only want to apply Preflight to descendents of an
	 * element with the `not-prose` class.
	 */
	:where(.not-prose) {
		@import "tailwindcss/preflight";
	}
}

/**
 * Add your custom base styles.
 */
@import "./tailwind/custom/base.css";

/**
 * Add your custom component styles.
 *
 * As used below, `@import-glob` imports all CSS files from the
 * `./tailwind/components` directory. This makes it easier to style things like
 * WordPress plugins or JavaScript components via separate files for each
 * plugin or library.
 *
 * Please note that because these files are added alphabetically, you must
 * ensure that CSS precedence isn’t affected by the order in which the files are
 * included. The intended use case is for, e.g., a `woocommerce.css` file to
 * add styles for WooCommerce using WooCommerce-specific class names, ensuring
 * that files for other WordPress plugins or JavaScript components could be
 * included in any order because they also use library-specific class names.
 */
@import-glob "./tailwind/custom/components/**/*.css";

/**
 * Add Tailwind Typography.
 */
@import "./tailwind/tailwind-typography.css";

/**
 * Add Tailwind’s utility classes and any utility classes registered by
 * plugins, then add custom utility classes.
 */
@import "tailwindcss/utilities";
@import "./tailwind/custom/utilities.css";

/**
 * Add styles exclusively for the WordPress editor.
 */
@if $target == editor {
	@import "./tailwind/tailwind-editor.css";
}