"Incomplete" CSS on prodution build

support
1

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:

image
image989×941 148 KB

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.

2

Disable purgecss and test again.

1 Like
3

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;
}
4

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.

5

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.

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

1 Like
6

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

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.