[4.x] Adding Tailwind CSS v4 support (#254)

jeffreyvr · Feb 12, 2025 · 948d8ee · 948d8ee
1 parent fc32d05
commit 948d8ee
Show file tree

Hide file tree

Showing 20 changed files with 3,487 additions and 11,143 deletions.
diff --git a/404.php b/404.php
@@ -14,7 +14,7 @@
 				<div class="text-5xl md:text-15xl text-gray-800 border-primary border-b">404</div>
 				<div class="w-16 h-1 bg-purple-light my-3 md:my-6"></div>
 				<p class="text-gray-800 text-2xl md:text-3xl font-light mb-8"><?php _e( 'Sorry, the page you are looking for could not be found.', 'tailpress' ); ?></p>
-				<a href="<?php echo get_bloginfo( 'url' ); ?>" class="bg-primary px-4 py-2 rounded text-white">
+				<a href="<?php echo get_bloginfo( 'url' ); ?>" class="bg-primary px-4 py-2 rounded-xs text-white">
 					<?php _e( 'Go Home', 'tailpress' ); ?>
 				</a>
 			</div>

diff --git a/README.MD b/README.MD
@@ -1,29 +1,32 @@
-<p><img src="http://tailpress.io/images/tailpress100.svg" width="260" alt="TailPress"></p>
+<p align="center"><a href="https://tailpress.io" target="_blank"><img src="https://tailpress.io/images/tailpress100.svg" width="260" alt="TailPress"></a></p>
 
-[![GitHub release](https://img.shields.io/github/release/jeffreyvr/tailpress?include_prereleases=&sort=semver)](https://github.com/jeffreyvr/tailpress/releases/)
-[![License](https://img.shields.io/badge/License-MIT-blue)](#license)
+<p align="center">
+<a href="https://github.com/jeffreyvr/tailpress/releases/"><img src="https://img.shields.io/github/release/jeffreyvr/tailpress?include_prereleases=&sort=semver" alt="GitHub release"></a>
+<a href="#license"><img src="https://img.shields.io/badge/License-MIT-blue" alt="License"></a>
+</p>
 
-# Introduction
+## About TailPress
 
 TailPress is a minimal boilerplate theme for WordPress using [Tailwind CSS](https://tailwindcss.com/).
 
 ## Getting started
 
-### Using the installer
+You can use the TailPress [installer](#installer), or you can simply [clone](#clone-repository) this repository.
 
-You can get started using the installer (using composer):
+### Installer
 
-```bash
-composer global require jeffreyvanrossum/tailpress-installer
+To use installer, you need to install it globally via Composer:
 
-tailpress new example-theme
-```
+`composer global require jeffreyvanrossum/tailpress-installer`
+
+Afterwards, you can run:
+
+`tailpress new example-theme`
 
 *If the tailpress command is not found, make sure to place Composer's global vendor bin in your `$PATH` ([see](#command-tailpress-not-found)).*
 
 Flags you can pass when using the installer:
 - Set a theme name `--name="Example Theme"`
-- Choose your compiler, mix or esbuild: `--compiler="esbuild"`
 - Initialize a git repository `--git`
 - Set the git branch name `--branch="main"`
 
@@ -34,28 +37,26 @@ Once your theme is ready, don't forget to cd into the directory.
 
 You will be asked if you would like to have WordPress installed as well. Keep in mind that you still need a local development environment for PHP and MySQL.
 
-### Regular method
+### Clone repository
 
 * Clone repo `git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress`
 * Run `rm -rf .git` to remove git (or `rmdir .git` for Windows)
 * Run `npm install`
 * Run `npm run watch` to start developing
 
-### General
+## Resources and compiling
 
 You will find the editable CSS and Javascript files within the `/resources` folder.
 
 Before you use your theme in production, make sure you run `npm run production`.
 
-## NPM Scripts
-
 There are several NPM scripts available. You'll find the full list in the `package.json` file under "scripts". A script is executed through the terminal by running `npm run script-name`.
 
 | Script     | Description                                                                    |
 |------------|--------------------------------------------------------------------------------|
-| production | Creates a production (minified) build of app.js, app.css and editor-style.css. |
+| production | Creates a production (minified) build of app.js, app.css and editor-style.css.  |
 | dev        | Creates a development build of app.js, app.css and editor-style.css.           |
-| watch      | Runs several watch scripts concurrently.                                       |
+| watch      | Recompiles after changes are made.                                             |
 
 ## Tips
 
@@ -87,7 +88,6 @@ You could also find the composer's global installation path by running `composer
 * [Screencasts](https://www.youtube.com/playlist?list=PL6GBdOp044SHIOSCZejodwr1HcYsC43wG)
 * [Tailwind CSS Documentation](https://tailwindcss.com/docs)
 * [Laravel Mix Documentation](https://laravel-mix.com)
-* [Esbuild Documentation](https://esbuild.github.io)
 
 ## Contributors
 

diff --git a/comments.php b/comments.php
@@ -65,7 +65,7 @@
 	<?php
 	comment_form(
 		array(
-			'class_submit'  => 'bg-primary text-white cursor-pointer rounded font-bold py-2 px-4',
+			'class_submit'  => 'bg-primary text-white cursor-pointer rounded-xs font-bold py-2 px-4',
 			'comment_field' => '<textarea id="comment" name="comment" class="bg-gray-200 w-full py-2 px-3" aria-required="true"></textarea>',
 		)
 	);

diff --git a/css/app.css b/css/app.css
diff --git a/css/editor-style.css b/css/editor-style.css
diff --git a/header.php b/header.php
@@ -68,20 +68,20 @@
 		</div>
 	</header>
 
-	<div id="content" class="site-content flex-grow">
+	<div id="content" class="site-content grow">
 
 		<?php if ( is_front_page() ) { ?>
 			<!-- Start introduction -->
 			<div class="container mx-auto">
-				<div class="px-12 py-16 my-12 rounded-xl bg-gradient-to-r from-blue-50 from-10% via-sky-100 via-30% to-blue-200 to-90%">
-                    <div class="mx-auto max-w-screen-md">
+				<div class="px-12 py-16 my-12 rounded-xl bg-linear-to-r from-blue-50 from-10% via-sky-100 via-30% to-blue-200 to-90%">
+                    <div class="mx-auto max-w-(--breakpoint-md)">
                         <h1 class="text-3xl lg:text-6xl tracking-tight font-extrabold text-gray-800 mb-6">Start building your next <a href="https://tailwindcss.com" class="text-secondary">Tailwind CSS</a> flavoured WordPress theme
                             with <a href="https://tailpress.io" class="text-primary">TailPress</a>.</h1>
                         <p class="text-gray-600 text-xl font-medium mb-10">TailPress is your go-to starting
                             point for developing WordPress themes with Tailwind CSS and comes with basic block-editor support out
                             of the box.</p>
                         <a href="https://github.com/jeffreyvr/tailpress"
-                            class="w-full sm:w-auto flex-none bg-gray-900 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200">View
+                            class="w-full sm:w-auto flex-none bg-gray-900 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-hidden transition-colors duration-200">View
                             on GitHub</a>
                     </div>
                 </div>

diff --git a/js/app.js b/js/app.js
diff --git a/mix-manifest.json b/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=435e606374bb44ea06de4ae5b0e31f61",
-    "/css/editor-style.css": "/css/editor-style.css?id=03a0a90cc989a9d4c480a752574b37c3",
-    "/css/app.css": "/css/app.css?id=1574f199e487c866afb056200ee1e6ce"
+    "/js/app.js": "/js/app.js?id=0d7422a8ae75252433a07d493b311670",
+    "/css/editor-style.css": "/css/editor-style.css?id=483ba8c1078ac43dba2289eb68afbe0a",
+    "/css/app.css": "/css/app.css?id=503b9c303eb8e7ceee7d18c2ff7354d8"
 }