Tailwind CSS classes not working

[artiste1212]

I just successfully installed webpack, and am now trying to follow along in chapter 5, styling the header and footer. I'm using the /web/themes/custom/alps_trips_templates/weather/alps-weather-forecast.html.twig template, but am not seeing any CSS being applied. I have verified that the template itself is working by temporarily removing a Tailwind CSS class and adding a bit of inline CSS to one of the headings. I was able to change the text color and make other styling changes this way, so I know that the template is working. However, the Tailwind CSS classes (for example, <h2 class="text-lg my-10">) or <div class="flex space-x-5"> are not producing any effect.

[murrwood]

One of the things that I found is that the Nord colors that were added for Storybook were not added to the alps_trips theme. As a result, areas of the site that relied on those colors were not shown. To deal with this I copied the theme ... colors section of the tailwind.config.js file from the storybook directory to the file in the alps_trips directory. After recompiling Tailwind and clearing cache things looked much better.

[artiste1212]

Thanks. I'll try that and will let you know, but I'm not sure if it will work. It's not only Nord colors which aren't working for me -- I'm not getting any CSS styling whatsoever. When I used Chrome element inspector, I saw an error message stating "Refused to apply style from 'https://packt.ddev.site/themes/custom/alps_trips/build/main.css?s3w5id' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

[murrwood]

I suggest checking the paths in the content section of tailwind.config.css There a lot of ../ and perhaps one was missed. Also check the plugins section of postcss.config.js Make you are generating a styles.css file in the build directory when you compile Tailwind

[artiste1212]

Thanks so much for your suggestions.

The first line of the content array reads './templates/**/*.html.twig', the second line is '../../../../storybook/stories/**/*.html.twig', and the third line is './us/**/*.js',. All three seem correct.

I don't have a clear enough understanding of things to be able to tell if the styles.css file is being generated. This file reads: let tailwindcss = require('tailwindcss'); module.exports = { plugins: [ tailwindcss('./tailwind.config.js'), require('autoprefixer') ] } I suspect that the problem may be here, but don't have enough of a background to be able to tell what actually is happening or if anything is going wrong.

Thanks again for your suggestions.

[murrwood]

The third line should be './js/*/.js' Looks like you have a typo.

As for the styles.css file when you were generating the assets in the Chapter 2 webpack section there was a paragraph that said:

Now, if you look at the build folder, you should find four new files: • main.js • main.js.map • styles.css • styles.css.map

Make sure that actually happened.

In addition make sure that you are successfully updating these files when you make changes. I call it compiling tailwind. As Chapter 2 suggests yarn run build:dev but I find it's necessary to do ddev yarn run build:dev from the alps_trips directory. An alternative is to ddev theme start:dev in a separate terminal session to monitor for changes.

[artiste1212]

Thanks so much for your help. You're right -- original file was .js, not .us. I either made a typo or got autocorrected when I typed that into here (copy & paste didn't work for some reason).

The 4 files (main.js, main.js.map, styles.css, styles.css.map) were all there.

I ran ddev yarn run build:dev from the alps_trips directory like you suggested, and it seems to have worked successfully:

yarn run v1.22.19
$ webpack --config webpack.config.js --mode development
asset styles.css 23.7 KiB [emitted] (name: main) 1 related asset
asset main.js 2.38 KiB [compared for emit] (name: main) 1 related asset
Entrypoint main 26.1 KiB (9.99 KiB) = styles.css 23.7 KiB main.js 2.38 KiB 2 auxiliary assets
orphan modules 35.1 KiB (javascript) 937 bytes (runtime) [orphan] 7 modules
runtime modules 274 bytes 1 module
cacheable modules 79 bytes (javascript) 23.3 KiB (css/mini-extract)
  ./js/main.js 29 bytes [built] [code generated]
  ./css/tailwind.css 50 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./css/tailwind.css 23.3 KiB [built] [code generated]
webpack 5.89.0 compiled successfully in 1146 ms
Done in 1.81s.

However, I'm still getting the error -- it's still refusing to apply the styles defined in main.css because of the MIME type issue. Did I need to do anything after compiling tailwind?

[lussoluca]

main.css file doesn't exist, it should be tailwind.css, we've reported everything here: https://github.com/PacktPublishing/Modernizing-Drupal-10-Theme-Development/blob/main/ERRATA.md#chapter-2