How to use postcss-import with tailwindcss-rails and importmaps

Question

I started a new rails project and am attempting to get tailwind running on it.

I'd like to be able to have the tailwind css files separated for organizational reasons.

Relevant gems in my Gemfile:

gem "sprockets-rails"
gem "importmap-rails"
gem "tailwindcss-rails"

I ran bin/importmap pin postcss-import which added a bunch of pins to my config/importmap.rb file.

I would have assumed this would allow those node modules to be accessed from JS files from within the application? So then in config/tailwind.config.js I have this:

module.exports = {
  // which files tailwind can access https://tailwindcss.com/docs/content-configuration
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './app/views/**/*'
  ],
  plugins: [
    require("postcss-import"),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

For my CSS, I have app/assets/stylesheets/application.tailwind.css that looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwind/font"

And I also have app/assets/stylesheets/tailwind/font.css that looks like this:

@layer base {
  h1 {
    @apply 2xl;
  }
  h2 {
    @apply h2;
  }
}

However, when I go to build the CSS (via bin/dev), I get this error:

18:00:48 css.1  | Rebuilding...
18:00:48 css.1  | Error: Cannot find module 'postcss-import'
18:00:48 css.1  | Require stack:
18:00:48 css.1  | - /home/zifnab/projects/my_project/config/tailwind.config.js
18:00:48 css.1  |     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
18:00:48 css.1  |     at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
18:00:48 css.1  |     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
18:00:48 css.1  |     at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)
18:00:48 css.1  |     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)
18:00:48 css.1  |     at /home/zifnab/projects/my_project/config/tailwind.config.js:112:5
18:00:48 css.1  |     at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:255614)
18:00:48 css.1  |     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)
18:00:48 css.1  |     at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
18:00:48 css.1  |     at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6) {
18:00:48 css.1  |   code: 'MODULE_NOT_FOUND',
18:00:48 css.1  |   requireStack: [
18:00:48 css.1  |     '/home/zifnab/projects/my_project/config/tailwind.config.js'
18:00:48 css.1  |   ]
18:00:48 css.1  | }

Which indicates to me that the importmaps aren't currently working during this build step to include the postcss-import module... I would rather not fall back on doing yarn packages, I'd like to stick with the rails 7 way of importmaps if possible... what can I do here to make it recognize the module from importmaps while building this CSS...?

Answer 1

You're using tailwindcss-rails gem which uses standalone tailwind executable. Postcss is already part of the build, you can remove this:

require("postcss-import")

Your imports have to come before anything else:

// postcss requires imports to be first
@import "./tailwind/font";

@tailwind base;
@tailwind components;
@tailwind utilities;

If this is not ideal you can switch everything to @import:

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

@import "./tailwind/font";