From 3dab6d3a64c9ee8f86f7d3e49fdee14f2c2dcd2f Mon Sep 17 00:00:00 2001 From: Bogdan Gusiev Date: Sat, 22 Feb 2025 10:37:57 +0100 Subject: [PATCH 1/2] Explain plugins in readme --- README.md | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7fa18145..113c5130 100644 --- a/README.md +++ b/README.md @@ -195,7 +195,7 @@ With some additional manual work the upstream upgrade tool will update your appl /node_modules ``` -**Create** a `package.json` in the root of the project: +**Create** or **update** a `package.json` in the root of the project: ```jsonc { @@ -232,7 +232,9 @@ With some additional manual work the upstream upgrade tool will update your appl Then, once you've run that successfully, clean up: -- **Delete** `package.json`, `node_modules/` and `package-lock.json` (or `yarn.lock`), plus remove `/node_modules` from `.gitignore`. +- **Review** `package.json` to remove unnecessary modules. + - This includes modules added for the period of upgrade. + - If you don't need any modules besides `tailwindcss` itself, **delete** `package.json`, `node_modules/` and `package-lock.json` (or `yarn.lock`), plus remove `/node_modules` from `.gitignore`. - **Go** to your CSS file and remove the following line (if present): ```css @plugin '@tailwindcss/container-queries'; @@ -273,6 +275,30 @@ This gem also makes available a Puma plugin to manage a live rebuild process whe This gem also generates a `Procfile.dev` file which will run both the rails server and a live rebuild process (see "Live Rebuild" section below). +#### Install plugins + +Tailwind plugins can be installed using `package.json`. + +Using Yarn: + +``` sh +[ ! -f package.json ] && yarn init +yarn add daisyui # example +``` + +Using npm: + +``` sh +npm init +npm add daisyui # example +``` + +Than use `@plugin` annotation in `app/assets/tailwind/application.css`: + +``` css +@import "tailwindcss"; +@plugin "daisyui"; +``` ### Building for production From c1e52588114619180790869c571c38f1822bcbe2 Mon Sep 17 00:00:00 2001 From: Mike Dalessio Date: Sun, 23 Feb 2025 17:03:02 -0500 Subject: [PATCH 2/2] Bump the "tailwind plugins" section up to H3 and move it to after the basic build/rebuild commands unrelated, rename the upgrade-troubleshooting section to disambiguate from the generate-troubleshooting section. --- README.md | 58 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 113c5130..10c08036 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ - [Upgrading your application from Tailwind v3 to v4](#upgrading-your-application-from-tailwind-v3-to-v4) * [You don't _have_ to upgrade](#you-dont-_have_-to-upgrade) * [Upgrade steps](#upgrade-steps) - * [Troubleshooting](#troubleshooting) + * [Troubleshooting a v4 upgrade](#troubleshooting-a-v4-upgrade) * [Updating CSS class names for v4](#updating-css-class-names-for-v4) - [Developing with Tailwindcss](#developing-with-tailwindcss) * [Configuration and commands](#configuration-and-commands) @@ -20,9 +20,10 @@ * [Building for testing](#building-for-testing) * [Building unminified assets](#building-unminified-assets) * [Live rebuild](#live-rebuild) + * [Using Tailwind plugins](#using-tailwind-plugins) * [Using with PostCSS](#using-with-postcss) * [Custom inputs or outputs](#custom-inputs-or-outputs) -- [Troubleshooting](#troubleshooting-1) +- [Troubleshooting](#troubleshooting) * [Lost keystrokes or hanging when using terminal-based debugging tools (e.g. IRB, Pry, `ruby/debug`...etc.) with the Puma plugin](#lost-keystrokes-or-hanging-when-using-terminal-based-debugging-tools-eg-irb-pry-rubydebugetc-with-the-puma-plugin) * [Running in a docker container exits prematurely](#running-in-a-docker-container-exits-prematurely) * [Conflict with sassc-rails](#conflict-with-sassc-rails) @@ -171,7 +172,7 @@ Done in 56ms If this doesn't succeed, it's likely that you've customized your Tailwind configuration and you'll need to do some work to make sure your application upgrades. Please read the [official upgrade guide](https://tailwindcss.com/docs/upgrade-guide) and try following the additional steps in [Updating CSS class names for v4](#updating-css-class-names-for-v4). -### Troubleshooting +### Troubleshooting a v4 upgrade You may want to check out [TailwindCSS v4 - upgrade experience report · rails/tailwindcss-rails · Discussion #450](https://github.com/rails/tailwindcss-rails/discussions/450) if you're having trouble upgrading. @@ -275,31 +276,6 @@ This gem also makes available a Puma plugin to manage a live rebuild process whe This gem also generates a `Procfile.dev` file which will run both the rails server and a live rebuild process (see "Live Rebuild" section below). -#### Install plugins - -Tailwind plugins can be installed using `package.json`. - -Using Yarn: - -``` sh -[ ! -f package.json ] && yarn init -yarn add daisyui # example -``` - -Using npm: - -``` sh -npm init -npm add daisyui # example -``` - -Than use `@plugin` annotation in `app/assets/tailwind/application.css`: - -``` css -@import "tailwindcss"; -@plugin "daisyui"; -``` - ### Building for production The `tailwindcss:build` is automatically attached to `assets:precompile`, so before the asset pipeline digests the files, the Tailwind output will be generated. @@ -357,6 +333,32 @@ If you are running `rails tailwindcss:watch` in a docker container without a tty Running `bin/dev` invokes Foreman to start both the Tailwind watch process and the rails server in development mode based on your `Procfile.dev` file. +### Using Tailwind plugins + +If you want to use Tailwind plugins, they can be installed using `package.json`. + +Using Yarn: + +``` sh +[ ! -f package.json ] && yarn init +yarn add daisyui # example +``` + +Using npm: + +``` sh +npm init +npm add daisyui # example +``` + +Than use `@plugin` annotation in `app/assets/tailwind/application.css`: + +``` css +@import "tailwindcss"; +@plugin "daisyui"; +``` + + ### Using with PostCSS If you want to use PostCSS as a preprocessor, create a custom `postcss.config.js` in your project root directory, and that file will be loaded by Tailwind automatically.