Reproduction instructions:

rm -rf foo
git clone git://github.com/rails/rails.git
./rails/railties/exe/rails new foo --css tailwind --edge
cd foo
rails generate scaffold book title
rails db:migrate
rails test:system

Expected results: tests pass

Actual results:

Error:
BooksTest#test_should_destroy_Book:
Capybara::ElementNotFound: Unable to find link or button "Destroy this book"
    test/system/books_test.rb:37:in `block in <class:BooksTest>'


rails test test/system/books_test.rb:35

...

Finished in 6.037822s, 0.6625 runs/s, 0.4969 assertions/s.
4 runs, 3 assertions, 0 failures, 1 errors, 0 skips

In tailwind, the show template uses the word Delete:

In rails main, the show template use the word Destroy:

https://github.com/rails/rails/blob/2b6182cbd68231ed2a26417e3184c3d8ed21c57a/railties/lib/rails/generators/erb/scaffold/templates/show.html.erb.tt#L9

Also in rails main, the system test template uses the word Destroy:

https://github.com/rails/rails/blob/2b6182cbd68231ed2a26417e3184c3d8ed21c57a/railties/lib/rails/generators/test_unit/scaffold/templates/system_test.rb.tt#L48-L53

Either tailwindcss-rails needs to replace the system test template, or it needs to be consistent with the one provided by rails.

Works well for scaffolding, but breaks when generating views for just a controller

My setup:

rubRails 7.0.0.alpha2
ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x86_64-linux]

Issue

Everything works fine in the development environment on my local machine. Online, however, some tailwind classes I have newly started using are missing from the emitted pack css file, even when I run rails webpacker:clobber and rails webpacker:compile again after deployment. No error appears in the deployment output.

I'm using this gem in version 0.3.3. The app is deployed on a VPS using dokku, which uses heroku buildpacks. The app is using webpacker, not the assets pipeline.

Files

postcss.config.js

let environment = {
  plugins: [
    require('autoprefixer'),
    require('tailwindcss')("./app/javascript/stylesheets/tailwind.config.js"),
	  require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

module.exports = environment

app/javascript/stylesheets/tailwind.config.js

module.exports = {
  purge: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/javascript/**/*.vue',
    './app/javascript/**/*.jsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

config/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

app/javascript/stylesheets/application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

// ...

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("stylesheets/application.scss")

import "controllers"

Hello,
After running rails tailwindcss:install there is no change in my production.rb file.
Can you help me about this? It says that

The last option adds the purger compressor to config/environments/production.rb

but there is no compressor enabled.

Should I add Tailwindcss::Purger.purge tailwind_css into my production.rb file

With Rails 7.0.0.alpha2, running

rails new foo --css tailwind
cd foo
bin/rails generate mailer Order received shipped

Produces:

      create  app/mailers/order_mailer.rb
       error  tailwindcss [not found]
      invoke  test_unit
      create    test/mailers/order_mailer_test.rb
      create    test/mailers/previews/order_mailer_preview.rb

What's missing:

      invoke  erb
      create    app/views/order_mailer
      create    app/views/order_mailer/received.text.erb
      create    app/views/order_mailer/received.html.erb
      create    app/views/order_mailer/shipped.text.erb
      create    app/views/order_mailer/shipped.html.erb

Hello,

After upgrading to Tailwindcss-Rails 2.0, re-running the install command and then deploying to production for the 1st time I encountered this error:

Sprockets::Error: unknown compressor: purger

Any advice on where I can look to try and find purger?

I'm deploying to Amazon Linux 2.

Thank you,

Binh

Consider the following example function:

def style_for_btn_outline(color)
  "bg-transparent text-#{color}-500 border-#{color}-500 hover:bg-#{color}-500 hover:text-white"
end

When passed a color name, it generates a string of class names which can be appended to the class list for a button. If given the color "blue", it will generate the following string: bg-transparent text-blue-500 border-blue-500 hover:bg-blue-500 hover:text-white.

If the classes text-blue-500 border-blue-500 hover:bg-blue-500 are not used elsewhere in the project, the purger will remove them since they have not been explicitly specified.

As a quick hack for getting around this, I defined a constant like this:

module ApplicationHelper
  KEEP_THESE_CLASSES = 'text-blue-500 border-blue-500 hover:bg-blue-500'
end

While this is obviously not ideal, it works since it allows the purger to read those values and thus not purge them.

I could refactor the style_for_btn_outline method to something like this:

def style_for_btn_outline(color)
  case color
  when "red"
    "bg-transparent text-red-500 border-red-500 hover:bg-red-500 hover:text-white"
  when "blue"
     "bg-transparent text-blue-500 border-blue-500 hover:bg-blue-500 hover:text-white"
  end
end

Since I'm explicitly specifying the color classes per color, the purger keep the classes; I just need to repeat for each of the colors that I want to provide styles for.

But it seems like setting class names dynamically might be something that would make sense to want to do in certain instances. It feels like something that would be fairly natural to do.

What are your thoughts? Which of the two workarounds listed above makes the most sense in your opinion? Thanks for your time.

Let me start by apologizing for 'fuming in the wrong kitchen' (this is not tailwindcss-rails per se - I actually anticipate it doing exactly what it should! It's much more likely some Docker container "thing" that lures the container into reporting "aarch64-linux" which I -- by now -- have learned repeatedly, is not a supported architecture by tailwindcss-rails !

Reckoning me not being alone on this crusade I risk the barrage and go forth:

Question: Does anyone know how to get Rails 7.0.0 to install with TailwindCSS in containers on the Apple M1 ?

the sordid details

Apple's latest/finest 'sand' - the M1 - is screaming fast but somewhat of a challenge to run Docker containers on;

Like with the sparkling fresh Rails 7.0.0 when doing rails new . --css=tailwind

I have a Dockerfile like this

[ update: 2021-12-20 22:30 CEST: the from image is actually arm64v8/ruby ]

FROM arm64v8/ruby:3.03
#
# I took great inspiration in this work by [Will Schenk](https://willschenk.com/articles/2020/rails_in_docker/)
#

WORKDIR /app

COPY src/Gemfile /app/Gemfile
COPY src/Gemfile.lock /app/Gemfile.lock
RUN gem install bundler && bundle install


# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Configure the main process to run when running the image
CMD ["rails","server","-b","0.0.0.0"]

and a docker-compose.yml like this (the db part is merely for completeness - it serves no purpose in this trickery

#
# Most if not all of it is a blatant c/p from
# Will Schenk's https://willschenk.com/articles/2020/rails_in_docker/
#
version: "3.9"
services:
  db:
    build: mysql 
    platform: linux/x86_64
    image: mindling_db
    container_name: mindling_db
    command: [ "--default-authentication-plugin=mysql_native_password" ]
    ports:
      - "3306:3306"
    volumes:
      - ~/src/mysql_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: mindling_development
  mindling:
    platform: linux/arm64/v8
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./src:/app
    ports:
      - "3000:3000"
    depends_on:
      - db

When I let it 'rip' -- hoping to install tailwindcss goodness after the fact (it failed during the initial rails new too ) -- I get this sad reply:

√ mindling % x rails tailwindcss:install
Creating mindling_mindling_run ... done
Add Tailwindcss include tags and container element in application layout
File unchanged! The supplied flag value not found!  app/views/layouts/application.html.erb
File unchanged! The supplied flag value not found!  app/views/layouts/application.html.erb
File unchanged! The supplied flag value not found!  app/views/layouts/application.html.erb
Build into app/assets/builds
       exist  app/assets/builds
   identical  app/assets/builds/.keep
File unchanged! The supplied flag value not found!  app/assets/config/manifest.js
File unchanged! The supplied flag value not found!  .gitignore
File unchanged! The supplied flag value not found!  Procfile.dev
Add bin/dev to start foreman
   identical  bin/dev
Compile initial Tailwind build
         run  rails tailwindcss:build from "."
ERROR: tailwindcss-rails does not support the aarch64-linux platform
Please install tailwindcss following instructions at https://tailwindcss.com/docs/installation

but for some reason the container keeps 'bragging about being' aarch64-linux 😆

So - now my heading (and my bearing for that matter too) is somewhat lost!

How do I get my containers to swallow their (linux) pride and start behaving?

I am using gem 'tailwindcss-rails'

Layout:

    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

Production:
config.assets.css_compressor = :purger

In circle ci it's raising a following error

rake aborted!
SassC::SyntaxError: Error: unterminated attribute selector for type
on line 1021:16 of stdin

.prose ol[type="A" s] {

---------------^
stdin:1021

Thanks for providing this gem.

I can't seem to find documentation on how to customize Tailwind when using the asset pipeline.
I have a tailwind.config.js file in my rails root directory. Do I need to move the file to assets/javascripts/?

What's the proper way to do this?

Hover states works in development but not in production.

I use these hover states for a button hover:bg-green-600 hover:text-white hover:shadow-lg but when css is purged, these classes are not included.

In the tailwind.css file this is what hover:bg-green-600 looks like, so maybe it's due to structure of this, that the Purger doesn't work?

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
}

Hello,
I have created new rails app with --css tailwind flag.
Neither rails tailwindcss:build nor rails tailwindcss:watch produce any output and fail silently.
TailwindCSS executable doesn't seem to be installed with gem.

In my case command that is executed under the hood looks like this:
/Users/user/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/tailwindcss-rails-2.0.0/lib/tasks/../../exe/tailwindcss -i /Users/user/project/app/assets/stylesheets/application.tailwind.css -o /Users/user/project/app/assets/builds/tailwind.css -c /Users/user/project/config/tailwind.config.js

And when I try to execute it manually I get:
zsh: no such file or directory: /Users/user/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/tailwindcss-rails-2.0.0/lib/tasks/../../exe/tailwindcss

I'm getting ~7 seconds to compile an unaltered pipeline - is this typical as it severely impacts my workflow ?

My PC has a AMD Ryzen 9 3950X CPU - it's not a slow machine :|

Hey everyone 👋

I was wondering if there was a reason to not include all of the first party plugins for the bundled tailwind.css. From what I can tell, these are the first party plugins that are not yet bundled:

• Active
• Group-focus
• Motion-safe
• Motion-reduce
• Disable
• Visited
• Checked
• First-child
• Last-child
• Odd-child
• Even-child

I'm working on a new project without webpacker, and with these plugins, I can't think of anything else that would be missing.

Thanks!

The changes with Tailwind 3 mean that its server needs to know where all styles are to be found. How do we communicate that dynamically in the case of engine code?

Engine gems may be installed in multiple places, and in Ruby we can identify the filesystem location with MyEngine.root. In the prior release all we needed to do was not have them be purged which could be accomplished like this in production.rb:

  config.assets.css_compressor = Tailwindcss::Compressor.new(files_with_class_names:
    Rails.root.glob("app/views/**/*.*") +
    MyEngine::Engine.root.glob("app/views/**/*.*")
  )

Is there a supported strategy to communicate that in the tailwind.config.js file, which doesn't speak Ruby?

Or do we just need to generate that file with all locations added?

Tailwind offers a set of Dark Mode styles - https://tailwindcss.com/docs/dark-mode

These are not enabled by default due to file size considerations, but that should be less of an issue for this gem due to CSS preprocessor purging in production.

Related to #8, we'd need to add a configuration file to change the defaults - https://tailwindcss.com/docs/installation#customizing-your-configuration

Hi there!

Very excited to see this package. Adding tailwind to a new rails project is one of the first things I do.

Locally, I've noticed that that a trivial change to application.js (or one of its dependencies) results in slow compile times:

[Webpacker] Compiling...
[Webpacker] Compiled all packs in /Users/evan/Projects/scratch-pad/TailwindTester/public/packs
[Webpacker] Hash: b937b4359523d601173a
Version: webpack 4.46.0
Time: 5188ms

This is on an M1 MBP.

This is a known issue for the interaction of postcss, web pack, and tailwind 2. While there are a few proposed work arounds on that issue, nothing seems super satisfactory.

Do you have any plans for addressing this? If so, I'd love to help in anyway. Right now I'm scratching my head on how to address it.

I’d like to make a proposal that going forward the gem version matches the release of Tailwind vendored in the assets directory.

Doing so would make it far easier for users to determine what version of Tailwind they are using in the gem, and make bundle updates a breeze.

The gem is currently on version 0.3.3 and that vendors 2.0.2 of Tailwind.

Could we release 2.2.4 using this convention?



Huge fan Tailwind, thank you for all your work in making it so easy to use with the asset pipeline 😄

When generating for rails 7, drop

data: { confirm: "Are you sure you want to delete this <%= singular_table_name %>?" }

from

There seems to be a caching issue happening—assets:precompile does nothing even if new classes are used and purging needs to happen again. I have to run assets:clobber first to force a full re-compile.

The game is unfortunately only available for rails 6 since the installation command forces the app to use webpacker which is based on rails 6. since the gem is also working with the asset pipeline, it should be no problem to convert to 5+. is it planned to be available for rails 5, or is there a workaround to make it work?

Hey,

I have two problems.

1. When run ./bin/rails tailwindcss:install I have

Thor::Error: The file /Users/XXX/XXX/XXX/postcss.config.js does not appear to exist

I fixed this by adding manually postcss.config.js file in the root document with:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

I'm not sure if that's correct approach and not destroy the build.

2. When refresh a page I receive all the time:

macroelements_type_controller.js:4 Uncaught Error: Module build failed: ModuleBuildError: Module build failed: 
@import "tailwindcss/base";
^
      File to import not found or unreadable: tailwindcss/base.
      in /Users/XXX/XXX/XXX/app/javascript/stylesheets/application.scss (line 1, column 1)

I can't find the reason of this bug. Any ideas how to fix this?

PS: macroelements_type_controller.js is a stimulus class and there is no connection between tailwind and this controller.

After following the installation steps, I cannot start webpack-dev-server anymore.
here's the stacktrace:

./bin/webpack-dev-server
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /project/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/project/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/project/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}

In this repo's readme there's:

If you need to customize Tailwind, you will need to install it the traditional way using Webpacker instead

I see at the moment there's a hardcoded tailwind.css file in app/assets/stylesheets but in practice it's very common to want to customize Tailwind's fonts, color schemes, etc.. Especially so with Tailwind 2.0 because a lot of the color variants aren't enabled by default and you enable them by customizing the config.

I'm not sure how Tailwind works exactly under the hood but I think Tailwind is just a PostCSS plugin. The creator of Tailwind walks through creating a build step using PostCSS directly in this video https://egghead.io/lessons/tailwind-set-up-tailwind-and-postcss at the 4:04 to 4:49 mark. Basically after you modify your Tailwind config you would run that build step to generate a new tailwind.css file.

Do you foresee an an ability to allow users of this gem to customize Tailwind in the future by having this gem provide a rake task that lets you generate a custom tailwind.css file that uses PostCSS under the hood without the need for Webpacker?

I don't know what the limitations are around using PostCSS within the asset pipeline but if it's usable that would also mean you could use PostCSS plugins such as postcss-import, autoprefixer and also let Tailwind handle purging (it does this by default through PostCSS). I would love to be able to drop Webpacker.

When I run these steps:

rails new demo —database=postgresql --skip-jbuilder --skip-webpack-install
cd demo
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install

I get this error:

rails aborted!
Webpacker configuration file not found /Users/roeland/dev/demo/config/webpacker.yml. Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /Users/roeland/dev/demo/config/webpacker.yml
/Users/roeland/dev/demo/bin/rails:5:in `<top (required)>'
/Users/roeland/dev/demo/bin/spring:10:in `require'
/Users/roeland/dev/demo/bin/spring:10:in `block in <top (required)>'
/Users/roeland/dev/demo/bin/spring:7:in `<top (required)>'

Caused by:
Errno::ENOENT: No such file or directory @ rb_sysopen - /Users/roeland/dev/demo/config/webpacker.yml
/Users/roeland/dev/demo/bin/rails:5:in `<top (required)>'
/Users/roeland/dev/demo/bin/spring:10:in `require'
/Users/roeland/dev/demo/bin/spring:10:in `block in <top (required)>'
/Users/roeland/dev/demo/bin/spring:7:in `<top (required)>'
Tasks: TOP => app:template
(See full trace by running task with --trace)

I installed without webpack because of this in de README: When run on an app using the just the asset pipeline,

I'm not sure if I'm overlooking something very simple here, so please forgive me if that's the case, but I can't seem to work out how to purge classes during deployment to production using Webpacker. Would anybody please be so kind as to point me in the right direction? Thank you. 😄

Like turbo-rails, it would be nice if this gem could double as an install script for Tailwind CSS on Webpack. If Webpack is detected, we run tailwindcss:install:webpack.

Hey, thanks for the gem which was a breeze to use in development:

However in production the Tailwind CSS appears to be missing:

If I manually edit the production HTML and add a CDN-version of Tailwind, it looks fine. Am I missing a step to have production correctly pick up the assets?

From the README I thought it would be taken care of:

In development mode, the full 3mb+ Tailwind stylsheet is loaded, but in production, only the css classes used by files in app/views and app/helpers are included.

Adding font families or colors or additional spacings should be easily doable by turning the tailwind.css file into an erb where certain points of configuration can be generated at run-time. This would further shrink the number of Tailwind users needing to use the Webpack version.

Tailwind CSS v3.0 is out, so this issue can track the work (if any) needed for this gem to upgrade to it.

Their upgrade guide is here.

How can I stop the Compilation meter

Hi!

The tailwindcss:install command fails on a fresh Rails 6.1.1 application, while using version 0.3.2.

./bin/rails tailwindcss:install
Copying Tailwindcss JavaScript
rails aborted!
Thor::Error: Could not find "/Users/marco.borromeo/.rvm/gems/ruby-2.7.1/gems/tailwindcss-rails-0.3.2/lib/install/app/assets/javascripts" in any of your source paths. Your current source paths are:
/Users/marco.borromeo/.rvm/gems/ruby-2.7.1/gems/railties-6.1.1/lib/rails/generators/rails/app/templates
/Users/marco.borromeo/temp/demo/bin/rails:5:in <top (required)>' /Users/marco.borromeo/temp/demo/bin/spring:10:in require'
/Users/marco.borromeo/temp/demo/bin/spring:10:in block in <top (required)>' /Users/marco.borromeo/temp/demo/bin/spring:7:in tap'
/Users/marco.borromeo/temp/demo/bin/spring:7:in <top (required)>' Tasks: TOP => app:template (See full trace by running task with --trace)

Downgrading to 0.3.1 perfectly works.

Thank you to specify in the readme the tailwind version ;)

I have Administrate installed, and the tailwdindcss-rails gem seems to also purge the CSS of Administrate. Seems like there is some kind of scoping needed to keep the purging to the tailwind css file.

Administrate.css without purge: https://gist.github.com/stephenson/6384c02f8645ae5d9977f3e1182935d4
Administrate.css with purge: https://gist.github.com/stephenson/284a7a93c87da5271684c95831e0eb1d

Any tricks or tips to fix? Would love to contribute, but sadly don't know where to start.

Let me know if there is anything I can do, if needed you can get access to the repo :)

The install script for this gem seems to require the presence of the tailwind.config.js file in app/javascript/stylesheets as referenced in the postcss.config.js file:

module.exports = {
  plugins: [
    require('tailwindcss')("./app/javascript/stylesheets/tailwind.config.js"),
    ...

However, the installer doesn't create this file. I'm not well versed with webpacker, postcss or js in general so I don't really understand what's going on here, but I do know the only way I could get my install to work was by adding the tailwind.config.js file.

I'm not sure if this suggestion is out of scope for this gem, but I'm working on a project that is sorely missing the @import function of webpacker. There are certain instances where partials/view_components feel too heavy handed to accomplish what I want, such as for styling different elements as buttons or form inputs.

I've been experimenting with a helper that pulls the class names from a central config file that are scoped based on the parameter order. So my code looks like:

btn:
  base: 'inline-flex items-center ...'
  primary: 'bg-indigo-600 ...'

<%=button_tag 'Example', class: tailwind(:btn, :primary)%>

As you can probably guess, it uses the first parameter to scope the request, and combines any matches it finds within that scope. In my project, I have it always adding any base styles it finds within a scope. So in this case, it combines the btn > base and btn > primary class names.

This was the least verbose way I could think of to be able to make my smaller styles reusable. It's also great for referencing these styles as stimulus css classes.

Can anyone think of a better way of managing this without webpacker? Also, is this out of scope for what this gem wants to provide?

I was trying to customize Tailwind CSS via tailwind.config.js and looking for the proper way to do it I saw you wrote this:

When used with Webpacker, Tailwind CSS is installed as a postCSS processor. Refer to the TailwindCSS documentation to customize your tailwind.config.js file.

I followed all the steps in the Tailwind CSS documentation but I didn't get it to work so I made a little research and I found there're some additional steps to accomplish before it works with Rails.

Once you've installed the gem:

• npx tailwindcss init
• Move the recently created tailwind.config.js file somewhere inside your ./app/javascript folder in order the file to be packed for Rails (important).
• Modify postcss.config.js to tell Webpacker where is the new file located: require('tailwindcss')('./app/javascript/tailwind.config.js'),
• If you've copied the tailwind.config.js file from this repo, important to add the packages @tailwindcss/forms, @tailwindcss/aspect-ratio, @tailwindcss/typography to package.json and install.
• Enjoy 🎉

The main problem I found was that Tailwind CSS documentation explains that the tailwind.config.js file is going to be searched (firstly) in the root of the project and currently in Rails this is definitely not going to happen.

I think this could be confusing and frustrating for people so maybe documentation should cover it as I guess customizing your Tailwind CSS boilerplate may be very common.

I've just created a new rails app like this: rails new app_name --skip-sprockets

Then I ran the two commands:
./bin/bundle add tailwindcss-rails - worked fine
./bin/rails tailwindcss:install

This second command fails with:

NameError: uninitialized constant Tailwindcss::Engine::Sprockets

Since I'm planning on using Webpacker exclusively, I don't see the need for having to add Sprockets just to be able to use this gem. What do you think?

Hi there 👋

I was wondering what the reason is for having a dot in the regex to search for class names? Are there tailwind class names that include a dot?

The reason I'm asking is, because this way HAML templates don't work:
https://regex101.com/r/hiAKC7/2

Without dots, it finds all class names for both html and haml templates:
https://regex101.com/r/0JJDKQ/1

Except I'm missing something?

How do we make tailwindcss work without webpacker?

Tailwind UI documentation mentions some first-party plugins:

• Include @tailwindcss/forms plugin (this provides a basic reset for form styles that makes form elements easy to override with utilities)
• Include @tailwindcss/typography plugin (this gives utility classes like prose)
• Include @tailwindcss/aspect-ratio plugin (this provides a composable API for giving elements a fixed aspect ratio)
• Include Inter font

These change will make the default build a lot more useful.

After 8af7bfc group-hover classes, group-hover:text-gray-900 for example, are not purged.

This adds a substantial amount of classes to the outputted css.

Unfortunately my regex skills are not strong enough to fix it.

(Originally created a comment but a new issue is probably more visible to people. )

It happens for example in JumpstartRails templates, where one of yields uses is <%= yield :title %>.
Closing </main> tag is not inserted in application.html.erb and the file ends up broken after ./bin/rails tailwindcss:install is executed.

Is there a way to import the tailwind into application.css/scss instead of the stylesheet_link_tag "tailwind" that would let us use @apply in the rest of our custom css? (No Webpacker)

After installing tailwindcss-rails and trying to compile with bin/rails webpacker:compile I get the following error:

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '/home/kadu/sources/myapp/node_modules/@babel/compat-data/data/corejs3-shipped-proposals'
    at createEsmNotFoundErr (internal/modules/cjs/loader.js:842:15)
    at finalizeEsmResolution (internal/modules/cjs/loader.js:835:15)
    at resolveExports (internal/modules/cjs/loader.js:424:14)
    at Function.Module._findPath (internal/modules/cjs/loader.js:464:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:802:27)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/kadu/sources/myapp/node_modules/@babel/preset-env/lib/polyfills/corejs3/usage-plugin.js:10:55)
    at Module._compile (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/kadu/sources/myapp/node_modules/@babel/preset-env/lib/index.js:29:44)
    at Module._compile (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (/home/kadu/sources/myapp/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at requireModule (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/files/plugins.js:165:12)
    at loadPreset (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/files/plugins.js:83:17)
    at createDescriptor (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at Generator.next (<anonymous>)
    at buildRootChain (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/config-chain.js:90:27)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (/home/kadu/sources/myapp/node_modules/@babel/core/lib/config/partial.js:95:62)

I tried with different versions of nodejs (15.10.0 and 12.21.0) with same results. I tried the solution presented in https://nodachisoft.com/common/en/article/en000018/#Solution and get another error:

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve 'babel-loader' in '/home/kadu/sources/myapp'
    at /home/kadu/sources/myapp/node_modules/webpack/lib/Compilation.js:1075:31
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:337:24
    at /home/kadu/sources/myapp/node_modules/neo-async/async.js:2830:7
    at /home/kadu/sources/myapp/node_modules/neo-async/async.js:6877:13
    at /home/kadu/sources/myapp/node_modules/neo-async/async.js:2830:7
    at done (/home/kadu/sources/myapp/node_modules/neo-async/async.js:2925:13)
    at /home/kadu/sources/myapp/node_modules/webpack/lib/NormalModuleFactory.js:449:23
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/forEachBail.js:30:14
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/kadu/sources/myapp/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/kadu/sources/myapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
resolve 'babel-loader' in '/home/kadu/sources/myapp'
  Parsed request is a module
  using description file: /home/kadu/sources/myapp/package.json (relative path: .)
    resolve as module
      /home/kadu/sources/bitcoin/node_modules doesn't exist or is not a directory
      /home/kadu/sources/node_modules doesn't exist or is not a directory
      /home/kadu/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/kadu/sources/myapp/node_modules
        using description file: /home/kadu/sources/myapp/package.json (relative path: ./node_modules)
          using description file: /home/kadu/sources/myapp/package.json (relative path: ./node_modules/babel-loader)
            no extension
              /home/kadu/sources/myapp/node_modules/babel-loader doesn't exist
            .js
              /home/kadu/sources/myapp/node_modules/babel-loader.js doesn't exist
            .json
              /home/kadu/sources/myapp/node_modules/babel-loader.json doesn't exist
            as directory
              /home/kadu/sources/myapp/node_modules/babel-loader doesn't exist

This is my package.json:

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "autoprefixer": "^9",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

Any hint what I'm doing wrong and how we can avoid this problem for others?

What?

Hi, first of all thanks for the work done here!

I was playing with importmaps and this gem to feel how is not to have any build step : ). Looks really nice. To try I made a dummy Rails app and when I deployed I was missing in Tailwind purged CSS a couple of classes.

I realized that's because app/javascript folder is not taken into consideration when doing the purging.

Is explained in the README how to add that folder and I did and it works

But I was wondering if it doesn't makes sense to include Javascript as default place to be purged. I'm all in in the Less javascript is better : ) But still I think is really rare if at some point you're not going to do some javascript and add/remove some CSS class.

Sorry if this is not that the right place to discuss this.
My thought was that this error can be hard to find for people without experience and adding app/javascript can make their life easier

The default Rails scaffold is plain to a fault. Let's ship some scaffold templates with this gem that uses Tailwind to demonstrate it.

👋 ,

This is more of a question than an issue. I've been toying around with https://github.com/rails/tailwindcss-rails the other day and while it's working perfectly fine, the VSCode extension does not work, since with this there is no tailwind entry in the package.json and also no tailwind config in the project root. It's all hidden within the gem.

I was wondering what the supposed escape hatch for this would be, do you have any ideas? Current workaround would be to replicate the config within the project root and add tailwind to the package.json, even though it's not used. Is there any other way?

Tailwind CSS needs purging, but it's a generic technique that could be used with any css toolkit. Should extract this into a generic gem. Maybe sprockets-css-purger, then this gem can use that, and focus mostly just on configuration and shipping the tailwind css.