diff --git a/README.md b/README.md index ff12ef5..939770f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CSS Bundling for Rails -Use [Tailwind CSS](https://tailwindcss.com), [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org), or [Dart Sass](https://sass-lang.com/) to bundle and process your CSS, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default). +Use [Tailwind](https://tailwindcss.com/), [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org), or [Dart Sass](https://sass-lang.com/) to bundle and process your CSS, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default). You develop using this approach by running the bundler in watch mode in a terminal with `yarn build:css --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the CSS build watcher (along with a JS build watcher, if you're also using `jsbundling-rails`). @@ -12,8 +12,6 @@ This also happens in testing where the bundler attaches to the `test:prepare` ta If your test framework does not define a `test:prepare` Rake task, ensure that your test framework runs `css:build` to bundle stylesheets before testing commences. If your setup uses [jsbundling-rails](https://github.com/rails/jsbundling-rails) (ie, esbuild + tailwind), you will also need to run `javascript:build`. -That's it! - You can configure your bundler options in the `build:css` script in `package.json` or via the installer-generated `tailwind.config.js` for Tailwind or `postcss.config.js` for PostCSS. @@ -21,17 +19,35 @@ You can configure your bundler options in the `build:css` script in `package.jso You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then: -1. Run `./bin/bundle add cssbundling-rails` -2. Run `./bin/rails css:install:[tailwind|bootstrap|bulma|postcss|sass]` +Run `./bin/bundle add cssbundling-rails` + +For Bootstrap, Bulma, Postcss, or SASS: + +Run `./bin/rails css:install:[bootstrap|bulma|postcss|sass]` + +For Tailwind: + +`./bin/bundle add tailwindcss-rails` + +`./bin/rails tailwindcss:install` -Or, in Rails 7+, you can preconfigure your new application to use a specific bundler with `rails new myapp --css [tailwind|bootstrap|bulma|postcss|sass]`. +For Dart: + +`./bin/bundle add dartcss-rails` + +`./bin/rails dartcss:install` + + +(If starting a new app in Rails 7, you can preconfigure your new application to use a specific bundler with `rails new myapp --css [tailwind|bootstrap|bulma|postcss|sass]`. For Tailwind when you create a new Rails app you will get only tailwindcss-rails with no Node-maanged packages.) ## FAQ ### How does this compare to tailwindcss-rails and dartsass-rails? -If you're already relying on Node to process your JavaScript, this gem is the way to go. But if you're using [the default import map setup in Rails 7+](https://github.com/rails/importmap-rails/), you can avoid having to deal with Node at all by using the standalone versions of Tailwind CSS and Dart Sass that are available through [tailwindcss-rails](https://github.com/rails/tailwindcss-rails/) and [dartsass-rails](https://github.com/rails/dartsass-rails/). It's simpler, fewer moving parts, and still has all the functionality. +If you're using [the default import map setup in Rails 7+](https://github.com/rails/importmap-rails/), you can avoid having Node-managed packages by using the standalone versions of Tailwind CSS and Dart Sass that are available through [tailwindcss-rails](https://github.com/rails/tailwindcss-rails/) and [dartsass-rails](https://github.com/rails/dartsass-rails/). + +Becuase they require a build task inside of those Gem, even apps with Node-managed packages (like you will get with JSBundling or CSSBundling) will need the additional Gems present. ### How do I import relative CSS files with Tailwind?