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...?

Alex · Accepted Answer · 2023-12-20 21:50:33Z

4

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";

edited Dec 20, 2023 at 21:50

answered Nov 29, 2023 at 4:30

Alex

31.3k10 gold badges69 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nzifnab Over a year ago

Ok well now I feel dumb! I tried what you mentioned (putting it as the first directive), but @import "tailwind/font" wasn't working so I assumed postcss-import must not be available by default... I just needed to prefix it with "./" and now it does work XD Thank you so much for saving me more headaches.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related