DEV Community

Discussion on: Angular 8/9/10 + Tailwind CSS Guide

View post
Collapse
 
carlparrish profile image
Carl Parrish • • Edited

I think I'm missing something. I have the following code in my angular app.

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-gray-400">1</div>
  <div class="bg-gray-400">2</div>
  <div class="bg-blue-300">3</div>
</div>

In my angular app the grid doesn't work when I look at it in my dev inspector the grid classes don't seem to be there. The same code in a codepen and the class is there. So I'm assuming somehow the grid classes didn't get installed in my angular app. Other tailwind classes (ie bg-gray-400) are working. Anyone have any suggestions on how to fix this?

Collapse
 
seankerwin profile image
Sean Kerwin •

Code looks fine. What version of tailwind are you using? I’m using 1.2 and grids work fine like that.

Collapse
 
carlparrish profile image
Carl Parrish • • Edited 
` "tailwindcss": "^1.2.0",`

From my package.json

New error in style.scss. This wasn't there before but I recopied and pasted from your post and now I'm getting this.

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./node_modules/postcss-loader/src??postcss!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find './custom-tailwind/custom-utilities.css'
  in [
    /workspace/fcc-drum-machine/src
  ]
    at resolveModule.catch.catch (/workspace/fcc-drum-machine/node_modules/postcss-import/lib/resolve-id.js:35:13)
Thread Thread
 
carlparrish profile image
Carl Parrish •

must have been something there. recompiled with an empty custom-utilities.css file
while I'm getting the following waring.

WARNING in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./node_modules/postcss-loader/src??postcss!./src/styles.scss)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(6:1) /workspace/fcc-drum-machine/src/custom-tailwind/custom-utilities.css is empty

It's compiling now and the grid is now working.