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](https://github.com/mhanberg/jekyll-postcss) 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.
['https://Stackoverflow.com/questions/70638185', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2719660/']
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](https://github.com/postcss/postcss-import).

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"

```
I used a similar solution to what [Donnie](https://stackoverflow.com/a/73348640/3402925) 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"]
    }),
    ...
};

```