# CSS files won't be loaded/generated using postcss-v2 plugin

**URL:** <https://talk.jekyllrb.com/t/css-files-wont-be-loaded-generated-using-postcss-v2-plugin/8486>\
**Category:** Help\
**Created:** [August 24, 2023, 11:30am UTC](https://talk.jekyllrb.com/t/css-files-wont-be-loaded-generated-using-postcss-v2-plugin/8486 "2023-08-24T11:30:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andre601](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/andre601/32/5437_2.png) [@Andre601](https://talk.jekyllrb.com/u/Andre601)\
**Post date:** [August 24, 2023, 11:30am UTC](https://talk.jekyllrb.com/t/css-files-wont-be-loaded-generated-using-postcss-v2-plugin/8486/1 "2023-08-24T11:30:28Z")

</div>

Hey,

I want to contribute to a project’s website which does use Jekyll.  
They use the original postcss plugin which doesn’t work for me (Freezes on Windows 10 apparently), so I switched over to this variant in the hopes it works and… it _kinda_ does.

While it doesn’t freeze the entire serve of Jekyll (Already a improvement to the postcss plugin), does it seem like there are some smaller issues with postcss-import?  
I get some errors I have no idea how to fix, nor what they even mean exactly… There is apparently a file missing?

I assumed it could be due to the `exclude` option in the `_config.yml` containing said CSS file, but this strangely wasn’t solving the issue…  
I’m at a huge loss here and believe it could be some wrong configuration of this plugin, postcss itself or something else, so if you can, I would appreciate some assistance were possible.

The current `_config.yml` (Note that removing the `syntax.css` file from the `exclude` doesn’t change a thing with the errors):

```yaml
# Site
title: "Social Networking Reimagined"
name: "fedi.foundation"
fullname: "Federated Diversity Foundation"
description: "Paving the Path of Federated Diversity Towards Social Networking Reimagined"
slogan: "United in Diversity"
logo: "/assets/images/android-icon-512x512.png"
image: "/assets/images/fedi-foundation-logo-black.png"
favicon: "/favicon.ico"
favicon_svg: "/assets/images/fedi-foundation-favicon.svg"
url: https://fedi.foundation
baseurl: ""
  
# Site Author
author:
  name: "Fedi Foundation"
  avatar: "avatar1.jpg"
  bio: "We build with you."
  location: "Fediverse"
  links:
    - label: "Mastodon"
      icon: "fab fa-fw fa-mastodon"
      url: https://mastodon.social/@humanetech
    - label: "Codeberg"
      icon: "fab fa-fw fa-codeberg"
      url: "https://codeberg.org/fediverse"

# Licensing default, and licenses for specific page types.
licensing:
  default: "CC0"
  people: "CC BY-NC-SA"

# Settings
include: ["_pages"]
permalink: /:title/

# Collections
collections:
  profile:
    output: true
    permalink: /people/:path/

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: post
      permalink: /:year/:month/:slug/
      avatar: /assets/images/avatar1.jpg
  # _pages
  - scope:
      path: "_pages"
    values:
      layout: page
  # _profile
  - scope:
      path: "_profile"
    values:
      layout: page
      type: people
      
# Syntax
markdown: kramdown
highlighter: rouge

# Paginate
paginate: 10

postcss:
  script: node_modules/.bin/postcss
  config: postcss.config.js

# Plugins
plugins: 
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-paginate
  - jekyll-postcss-v2
  - jemoji

# Exclude development time dependencies
exclude: [
  README.md,
  Gemfile,
  Gemfile.lock,
  CONTRIBUTING.md,
  CONTRIBUTORS.md,
  package.json,
  package-lock.json,
  postcss.config.js,
  tailwind.config.js,
  assets/css/syntax.css
]

```

`postcss.config.js` file:

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

```

Logs during `bundle exec jekyll serve`

```auto
Configuration file: D:/GitHub/fedi-foundation/_config.yml
            Source: D:/GitHub/fedi-foundation
       Destination: D:/GitHub/fedi-foundation/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Error: Failed to find 'assets/css/syntax'
  in [
    D:\GitHub\fedi-foundation\_site\assets\css
  ]
    at D:\GitHub\fedi-foundation\node_modules\postcss-import\lib\resolve-id.js:35:13
    at async LazyResult.runAsync (D:\GitHub\fedi-foundation\node_modules\postcss\lib\lazy-result.js:289:11)
    at async Promise.all (index 0)
        PostCSS v2: Rewrote /assets/css/style.css
                    done in 3.5 seconds.
 Auto-regeneration: enabled for 'D:/GitHub/fedi-foundation'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

```

Logs when loading site (Note that mentioned folders and files do not exist in the source itself, so they probs get auto-generated?):

```sh
[2023-08-24 13:15:42] ERROR `/assets/css/tailwindcss/utilities' not found.
[2023-08-24 13:15:42] ERROR `/assets/css/assets/css/syntax' not found.
[2023-08-24 13:15:42] ERROR `/assets/css/tailwindcss/base' not found.
[2023-08-24 13:15:42] ERROR `/assets/css/tailwindcss/components' not found.

```

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [August 24, 2023, 4:22pm UTC](https://talk.jekyllrb.com/t/css-files-wont-be-loaded-generated-using-postcss-v2-plugin/8486/2 "2023-08-24T16:22:02Z")

</div>

does the project have tailwind somewhere?

my guess is you need postcss in order to use tailwind? I never installed tailwind with jekyll, it seemed complicated but doable.

I’d probably look up how to use tailwind with jekyll and then do a small test site on its own and see what you need to do to get it to work and then come back to this project. Just stumbling around inside this project may be more trouble than just learning how it should work.