search

notiz-dev / notiz

Frontend for notiz.dev. Built with Angular and Scully 👋
https://notiz.dev
67 stars 9 forks source link

Angular 10 with Tailwind CSS #111

Closed utterances-bot closed 3 years ago

utterances-bot commented 4 years ago

Angular 10 with Tailwind CSS

Learn how to style Angular applications with Tailwind CSS

https://notiz.dev/blog/angular-10-with-tailwindcss

alexbjorlig commented 4 years ago

Hi Marc. Thanks for a great post. I'm trying to follow this guide in a project using the Angular CLI. We are using the Angular CLI feature of having multiple projects. When I everything described above, I get the error that postcss-import can't resolve my styles.scss file - it's looking in the wrong directory. I have created a SO quesiton. If you have any ideas what's going on, I would be very thankfull 🙏 https://stackoverflow.com/q/63265225/3694288

marcjulian commented 4 years ago

@alexbjorlig Hi Alex, do you have an example repo for me to have a look at to reproduce your error? We are using this also for notiz.dev. Have a look in our angular.json. We configured the "builder": "ngx-build-plus:browser", for two applications notiz and shortcodes.

alexbjorlig commented 4 years ago

Thanks for the quick reply, I will get started with the creation of a repo so the error can be reproduced.

phileagleson commented 4 years ago

I followed this walkthrough and was getting an error stating that plugins was not a valid option for postcss. I think postcss-loader may have been updated since this was written so I wanted to share what worked for me. I had to update my webpack.config.js to look like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};

Just wanted to share in case it helps anyone else.

garygrossgarten commented 4 years ago

@phileagleson Awesome, thank you! We will update the guide.

btpatelmobio commented 3 years ago

Hey Mark

btpatelmobio commented 3 years ago

i have some issue in install tailwind in angular 10.

This is the error in tailwind please help me for solving.

"ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/styles.scss) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

marcjulian commented 3 years ago

@btpatelmobio which version of postcss-loader are you using? If you are on version 4.0 please try @phileagleson update for the webpack.config.js as the options have been update

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
-          ident: 'postcss',
-          syntax: 'postcss-scss',
-          plugins: () => [
-            require('postcss-import'),
-            require('tailwindcss'),
-            require('autoprefixer'),
-          ],
+          postcssOptions: {
+           ident: 'postcss',
+            syntax: 'postcss-scss',
+            plugins: [
+              require('postcss-import'),
+              require('tailwindcss'),
+              require('autoprefixer'),
            ],
          },
        },
      },
    ],
  },
};
btpatelmobio commented 3 years ago

Hi Mark

btpatelmobio commented 3 years ago

Thanks for the big support.

rakesh-banneret commented 3 years ago

Thanks for the blog, It was working absolutly fine for me but one day it started giving me error when checked your blog again came to know that need to change the extra webpack.config.js but still I am getting the below error

[error] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

below is my package.json file { "name": "pariksha", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~10.0.4", "@angular/common": "~10.0.4", "@angular/compiler": "~10.0.4", "@angular/core": "~10.0.4", "@angular/forms": "~10.0.4", "@angular/platform-browser": "~10.0.4", "@angular/platform-browser-dynamic": "~10.0.4", "@angular/router": "~10.0.4", "@garygrossgarten/ngx-tailwind": "^0.2.0", "keycloak-angular": "^8.0.1", "keycloak-js": "^11.0.2", "ng-katex": "^2.0.3", "rxjs": "~6.5.5", "tslib": "^2.0.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1000.3", "@angular/cli": "~10.0.3", "@angular/compiler-cli": "~10.0.4", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^6.0.0", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~3.3.0", "karma-jasmine-html-reporter": "^1.5.0", "ngx-build-plus": "latest", "postcss-import": "latest", "postcss-loader": "latest", "postcss-scss": "latest", "protractor": "~7.0.0", "tailwindcss": "latest", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.9.5" } }

below is the webpack.config module.exports = { module : { rules : [ { test: /.scss$/, loader: 'postcss-loader', postcssOptions: { ident: 'postcss', syntax: 'postcss-scss', plugins: [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ], }, }, ], }, }

Is it because in my package.json I see latest as the version and not anything specific? Please help

marcjulian commented 3 years ago

@rakesh-banneret do you have reproduction repo? Much easier to help you out, otherwise I suggest you create a new Angular project and start over with all steps. One note postcss-import in version 13.0.0 breaks currently the build, thus use version 12.0.1. Check out ngx-tailwind.

rakesh-banneret commented 3 years ago

Thank you very much.

Really appreciate your help. I will tey to create new in case I have issue I will share repo with you.

Regards Rakesh

Get Outlook for Androidhttps://aka.ms/ghei36

From: Marc notifications@github.com Sent: Wednesday, October 28, 2020 2:09:53 PM To: notiz-dev/notiz notiz@noreply.github.com Cc: Rakesh Kumar rkumar24@live.com; Mention mention@noreply.github.com Subject: Re: [notiz-dev/notiz] Angular 10 with Tailwind CSS (#111)

@rakesh-bannerethttps://github.com/rakesh-banneret do you have reproduction repo? Much easier to help you out, otherwise I suggest you create a new Angular project and start over with all steps. One note postcss-import in version 13.0.0 breaks currently the build, thus use version 12.0.1. Check out ngx-tailwindhttps://github.com/notiz-dev/ngx-tailwind.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/notiz-dev/notiz/issues/111#issuecomment-717783837, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQLC6LRNL4USZQ24EWN4B5TSM7KFTANCNFSM4PV36XJA.

ryanjanborja commented 3 years ago

Hmmm. I'm using angular 11.0.2, tailwindcss 2.0.1. I didn't encounter issues running the app but the page doesn't apply the styles. https://imgur.com/gZrP4Lw

marcjulian commented 3 years ago

@iryanjan18 can you provide a reproduction repository?

ryanjanborja commented 3 years ago

@iryanjan18 can you provide a reproduction repository?

Here's my newly created repo: https://github.com/iryanjan18/angular-tailwind

marcjulian commented 3 years ago

@iryanjan18 I see you are using @angular-builders/custom-webpack, in this blog post and also the schematics ngx-tailwind are using ngx-build-plus instead. Can you try it out with ngx-build-plus instead of @angular-builders/custom-webpack, you can use it easily in a new project via the schematics.

Additionally, when I run ng serve in your project the following log indicates that PostCSS cannot pickup any plugin including Tailwind.

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
rakesh-banneret commented 3 years ago

Hi ,

Thanks for your help. It is a private repo but I can try the things you told in couple of days and let you know.

Regards Rakesh

Get Outlook for Androidhttps://aka.ms/ghei36

From: Ryan Jan Borja notifications@github.com Sent: Monday, November 23, 2020 1:21:24 PM To: notiz-dev/notiz notiz@noreply.github.com Cc: Rakesh Kumar rkumar24@live.com; Mention mention@noreply.github.com Subject: Re: [notiz-dev/notiz] Angular 10 with Tailwind CSS (#111)

@iryanjan18https://github.com/iryanjan18 can you provide a reproduction repository?

Here's my newly created repo: https://github.com/iryanjan18/angular-tailwind

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/notiz-dev/notiz/issues/111#issuecomment-731989428, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQLC6LVU3YQMRLFRNX5ZW7LSRIH7ZANCNFSM4PV36XJA.

felixbeer commented 3 years ago

Hey!

Thanks a lot for your tutorial. Is there anyway we could still get "intellisense" working in Jetbrains Editors for example. And out of interest, which editor are you using?

marcjulian commented 3 years ago

@BeerGrizzly awesome thanks 👍 !! I am using VS Code together with tailwind-intellisense. I read recently that Webstorm 2020.3 has added Tailwind intellisense support. If you are using any other JetBrains IDE you can install the Tailwind CSS Plugin.

Hopefully you can find something useful for your setup 🤞