Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explain plugins in readme #505

Merged
merged 2 commits into from
Feb 23, 2025
Merged

Explain plugins in readme #505

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3dab6d3
Explain plugins in readme
bogdan Feb 22, 2025
c1e5258
Bump the "tailwind plugins" section up to H3
flavorjones Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 34 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,18 @@
- [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)
* [Building for production](#building-for-production)
* [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)
Expand Down Expand Up @@ -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.

Expand All @@ -195,7 +196,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
{
Expand Down Expand Up @@ -232,7 +233,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';
Expand Down Expand Up @@ -273,7 +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).


### 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.
Expand Down Expand Up @@ -331,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.
Expand Down