Tailwind + Jekyll: including partial css files doesn't work?

Question

I'm trying to migrate from the now dead Tachyons framework to Tailwindcss. However, there's one block I haven't figured out how to overcome.

I use the jekyll-postscss Gem to enable postscss processing during jekyll build. Things appear to work well with the following setup:

assets/css/styles.css:

---
---

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

postcss.config.js:

module.exports = {
    parser: 'postcss-scss',
    plugins: [
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
      ...(process.env.JEKYLL_ENV == "production"
        ? [require('cssnano')({ preset: 'default' })]
        : [])
    ]
};

tailwind.config.js:

module.exports = {
  purge: [
    './_includes/**/*.html',
    './_layouts/**/*.html',
    './_posts/*.md',
    './*.html',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

With a jekyll build command, I can see the correctly generated styles.css file under _site/assets/css.

However, it doesn't work when I try to import other css or scss files. For example, if I modify the styles.css file into the following

assets/css/styles.scss:

---
---

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

@import "test.css"

where test.css is in the same directory as styles.scss (assets/css/), postcss-import throws an exception

Error: Failed to find './test.css'
  in [
    /project
  ]
    at /project/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (/project/node_modules/postcss/lib/lazy-result.js:396:11)

I'm a bit confused as to why postcss-import does not see this file.

Answer 1

Because the css resource you imported is not in the resolved path, the default resolved path includes: root directory, node_modules, etc. Other paths can refer to the official documentation link.

You can try the following methods to solve this problem:

1. Modify the postcss configuration file postcss.config.js

   module.exports = {
       ...
       require('postcss-import')({
           addModulesDirectories: ["assets/css"]
       }),
       ...
   };
   

2. Modify the main style file assets/css/styles.css

   @import "assets/css/test.css"
   

Answer 2

I used a similar solution to what Donnie suggests, but I set the path instead of the addModulesDirectories, which resolved the issue for me. I didn't try the addModulesDirectories, so I don't know whether that might have also worked.

module.exports = {
    ...
    require('postcss-import')({
        path: ["assets/css"]
    }),
    ...
};