Init

tailwind.css

@@ -0,0 +1,83 @@
+/**
+ * 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 styles exclusively for the WordPress editor.
+ */
+@if $target == editor {
+	@import "./tailwind/tailwind-editor.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";