"Incomplete" CSS on prodution build

[dpaiva]

Hi, I am trying to deploy my page with Github Pages, however the styles are not loaded.

I am using Tailwind CSS. It’s weird because it generates a CSS file but the file seems to contain only a small portion of my tailwind.css file. I believe Tailwind is not being compiled/loaded into the project but I don’t know why. I have spent the last 5 hours in this and couldn’t come to a solution.

On the sources the generated CSS file is shown:

The @font-face directives are indeed from my tailwind.css file, but this is the only thing that it outputs.

I am deploying via Github Actions. The script and the full code is in the repository below.

GitHub - diegopaiva1/entusiasta.dev: Blog entusiasta.dev

[jmooring]

Disable purgecss and test again.

[dpaiva]

There was a small improvement, however some styles do not seem to be loading.

Here’s the minified CSS:

https://diegopaiva1.github.io/entusiasta.dev/css/app.min.defd8e0a8c8afd26ba61214d7cdd985040c3c8fb76d58a73f2e77459c00b3cc6.css

Searching for e.g. alert-box or table-of-contents yields no results, although these classes styles are defined in this same file:

#content .alert-box .alert-title {
  @apply text-inherit font-semibold text-lg py-0 px-0 mb-2;
}

#content .alert-box a {
  @apply text-inherit hover:text-inherit;
}

#content .alert-box .alert-icon {
  @apply w-7 h-7 mr-2;
}

...

#content .table-of-contents {
  @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 p-4 border dark:border-gray-700 rounded-lg;
}

#content .table-of-contents #TableOfContents ul {
  @apply list-decimal list-inside ml-4;
}

#content .table-of-contents #TableOfContents ul li {
  @apply my-2 text-base;
}

[dpaiva]

After some time, I realized the problem was in my Tailwind config. In localhost it worked just fine, but in production it did not. My Hugo project is hosted in a directory named src.

tailwind.config.js before:

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
      "./themes/**/layouts/**/*.html",
      "./content/**/layouts/**/*.html",
      "./layouts/**/*.html",
      "./content/**/*.html",
      "./content/**/*.md"
    ],
    theme: {
      extend: {
        fontFamily: {
          'sans' : ['"Inter"', '-apple-system' , 'BlinkMacSystemFont', 'avenir next', 'avenir', 'segoe ui', 'helvetica neue', 'helvetica', 'Cantarell', 'Ubuntu', 'roboto', 'noto', 'arial', 'sans-serif'],
        },
      },
    },
    plugins: [],
    variants: ['group-hover'],
  }

tailwind.config.js then:

import path from 'path';

// When deploying to production, set the base directory to your Hugo project's root directory.
const baseDir = path.join(__dirname, '..');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    `${baseDir}/themes/**/layouts/**/*.html`,
    `${baseDir}/content/**/layouts/**/*.html`,
    `${baseDir}/layouts/**/*.html`,
    `${baseDir}/content/**/*.html`,
    `${baseDir}/content/**/*.md`,
    `${baseDir}/public/**/*.html`,
  ],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Inter"', '-apple-system', 'BlinkMacSystemFont', 'avenir next', 'avenir', 'segoe ui', 'helvetica neue', 'helvetica', 'Cantarell', 'Ubuntu', 'roboto', 'noto', 'arial', 'sans-serif'],
      },
    },
  },
  plugins: [],
  variants: ['group-hover'],
}

This was a quite frustrating task but it came to a happy end.

[nternetinspired]

Off-topic I know, but your css seems overly specified. Adding needlesess selectors is one of the most common causes I see of bloated files and unwanted conflicts.

Do you have an alert box or a table of contents that is not in id=“content” ? If you don’t then that’s superflous as a selector.

The first half of this example is simply not needed. Once you have targetted your elemeny by id, which is unique, scoping that with other selectors is pointless.

@dpaiva

#content .table-of-contents #TableOfContents ul {

There is never a need to chain element ids like this, because the same can be achieved with #TableOfContents ul

[dpaiva]

Ikr. I am not very into CSS, I just wanted some working stuff.