tailwindcss | A utility-first CSS framework for rapid UI development | Theme library

 by   tailwindlabs HTML Version: 3.2.7 License: MIT

kandi X-RAY | tailwindcss Summary

tailwindcss is a HTML library typically used in User Interface, Theme, Tailwind CSS, Framework applications. tailwindcss has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
A utility-first CSS framework for rapidly building custom user interfaces.
    Support
      Quality
        Security
          License
            Reuse
            Support
              Quality
                Security
                  License
                    Reuse

                      kandi-support Support

                        summary
                        tailwindcss has a medium active ecosystem.
                        summary
                        It has 66380 star(s) with 3383 fork(s). There are 590 watchers for this library.
                        summary
                        There were 8 major release(s) in the last 6 months.
                        summary
                        There are 5 open issues and 2760 have been closed. On average issues are closed in 15 days. There are 2 open pull requests and 0 closed requests.
                        summary
                        It has a neutral sentiment in the developer community.
                        summary
                        The latest version of tailwindcss is 3.2.7
                        tailwindcss Support
                          Best in #Theme
                            Average in #Theme
                            tailwindcss Support
                              Best in #Theme
                                Average in #Theme

                                  kandi-Quality Quality

                                    summary
                                    tailwindcss has 0 bugs and 0 code smells.
                                    tailwindcss Quality
                                      Best in #Theme
                                        Average in #Theme
                                        tailwindcss Quality
                                          Best in #Theme
                                            Average in #Theme

                                              kandi-Security Security

                                                summary
                                                tailwindcss has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
                                                summary
                                                tailwindcss code analysis shows 0 unresolved vulnerabilities.
                                                summary
                                                There are 0 security hotspots that need review.
                                                tailwindcss Security
                                                  Best in #Theme
                                                    Average in #Theme
                                                    tailwindcss Security
                                                      Best in #Theme
                                                        Average in #Theme

                                                          kandi-License License

                                                            summary
                                                            tailwindcss is licensed under the MIT License. This license is Permissive.
                                                            summary
                                                            Permissive licenses have the least restrictions, and you can use them in most projects.
                                                            tailwindcss License
                                                              Best in #Theme
                                                                Average in #Theme
                                                                tailwindcss License
                                                                  Best in #Theme
                                                                    Average in #Theme

                                                                      kandi-Reuse Reuse

                                                                        summary
                                                                        tailwindcss releases are available to install and integrate.
                                                                        tailwindcss Reuse
                                                                          Best in #Theme
                                                                            Average in #Theme
                                                                            tailwindcss Reuse
                                                                              Best in #Theme
                                                                                Average in #Theme
                                                                                  Top functions reviewed by kandi - BETA
                                                                                  kandi has reviewed tailwindcss and discovered the below as its top functions. This is intended to give you an instant insight into tailwindcss implemented functionality, and help decide if they suit your requirements.
                                                                                  • Build the Plugin API
                                                                                    • Processes apply rules .
                                                                                      • Normalize a config .
                                                                                        • Register a plugin
                                                                                          • Start watcher .
                                                                                            • Apply variant variant set
                                                                                              • Finalize CSS selector
                                                                                                • Build the plugin
                                                                                                  • Rebuild CSS
                                                                                                    • Gets the context for the root .
                                                                                                      Get all kandi verified functions for this library.
                                                                                                      Get all kandi verified functions for this library.

                                                                                                      tailwindcss Key Features

                                                                                                      A utility-first CSS framework for rapid UI development.

                                                                                                      tailwindcss Examples and Code Snippets

                                                                                                      What's the best way to get Tailwind CSS into an ASP.NET Core project?
                                                                                                      JavaScriptdot imgLines of Code : 81dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      npm install webpack webpack-cli --save-dev
                                                                                                      
                                                                                                      npm install css-loader postcss-loader mini-css-extract-plugin --save-dev
                                                                                                      npm install tailwindcss postcss-import
                                                                                                      
                                                                                                      const path = require('path');
                                                                                                      const MiniCssExtractPlugin = require("mini-css-extract-plugin");
                                                                                                      
                                                                                                      const bundleFileName = 'holly';
                                                                                                      const dirName = 'Holly/wwwroot/dist';
                                                                                                      
                                                                                                      module.exports = (env, argv) => {
                                                                                                          return {
                                                                                                              mode: argv.mode === "production" ? "production" : "development",
                                                                                                              entry: ['./Holly/wwwroot/js/app.js', './Holly/wwwroot/css/styles.css'],
                                                                                                              output: {
                                                                                                                  filename: bundleFileName + '.js',
                                                                                                                  path: path.resolve(__dirname, dirName)
                                                                                                              },
                                                                                                              module: {
                                                                                                                  rules: [{
                                                                                                                      test: /\.css$/,
                                                                                                                      use: [
                                                                                                                          MiniCssExtractPlugin.loader,
                                                                                                                          'css-loader',
                                                                                                                          'postcss-loader'
                                                                                                                      ]
                                                                                                                  }]
                                                                                                              },
                                                                                                              plugins: [
                                                                                                                  new MiniCssExtractPlugin({
                                                                                                                      filename: bundleFileName + '.css'
                                                                                                                  })
                                                                                                              ]
                                                                                                          };
                                                                                                      };
                                                                                                      
                                                                                                      
                                                                                                      module.exports = {
                                                                                                        plugins: [
                                                                                                          require('postcss-import'),
                                                                                                          require('tailwindcss'),
                                                                                                          require('autoprefixer'),
                                                                                                        ]
                                                                                                      }
                                                                                                      
                                                                                                      @import "tailwindcss/base";
                                                                                                      @import "./holly-base.css";
                                                                                                      
                                                                                                      @import "tailwindcss/components";
                                                                                                      @import "./holly-components.css";
                                                                                                      
                                                                                                      @import "tailwindcss/utilities";
                                                                                                      
                                                                                                        "scripts": {
                                                                                                          "test": "echo \"Error: no test specified\" && exit 1",
                                                                                                          "build": "webpack --progress --profile",
                                                                                                          "watch": "webpack --progress --profile --watch",
                                                                                                          "production": "webpack --progress --profile --mode production"
                                                                                                        },
                                                                                                      
                                                                                                      npm run build
                                                                                                      
                                                                                                      npm run watch
                                                                                                      
                                                                                                      # Latest .NET Core from https://hub.docker.com/_/microsoft-dotnet-core-sdk/ (not the nightly one)
                                                                                                      FROM mcr.microsoft.com/dotnet/core/sdk:3.0.100-preview9-disco AS build-env
                                                                                                      
                                                                                                      # Setup npm!
                                                                                                      RUN apt-get -y update && apt-get install npm -y && apt-get clean
                                                                                                      
                                                                                                      WORKDIR /app
                                                                                                      COPY . ./
                                                                                                      
                                                                                                      # To run Tailwind via Webpack/Postcss
                                                                                                      RUN npm install
                                                                                                      RUN npm run production
                                                                                                      
                                                                                                      RUN dotnet restore "./Holly/Holly.csproj"
                                                                                                      RUN dotnet publish "./Holly/Holly.csproj" -c Release -o out
                                                                                                      
                                                                                                      Laravel Mix and importing files
                                                                                                      JavaScriptdot imgLines of Code : 68dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      webpack.mix.js:15
                                                                                                          .css([
                                                                                                          ^
                                                                                                      
                                                                                                      SyntaxError: Unexpected token '.'
                                                                                                      
                                                                                                      ...
                                                                                                      
                                                                                                      npm ERR! errno 1
                                                                                                      
                                                                                                      mix.js('resources/js/app.js', 'public/js')
                                                                                                          .sass('resources/sass/app.scss', 'public/css')
                                                                                                          .styles(
                                                                                                              [
                                                                                                                  'public/css/sidenav.css',
                                                                                                                  'public/css/general.css',
                                                                                                                  'resources/asset/jqueryui/jquery-ui.min.css',
                                                                                                                  'resources/asset/jqueryui/jquery-ui.structure.min.css',
                                                                                                                  'public/css/stt.css',
                                                                                                                  'public/css/ilightbox.css',
                                                                                                                  'public/css/flex.css',
                                                                                                                  'public/css/general.css',
                                                                                                                  'resources/asset/fontawesome/css/all.css',
                                                                                                                  'public/css/smartforms/smart-forms.css',
                                                                                                                  'public/css/smartforms/smart-themes/blue.css',
                                                                                                                  'public/css/hover-min.css',
                                                                                                                  'public/css/klik.css',
                                                                                                                  'public/css/spectrum.css',
                                                                                                                  'public/css/infobox.css',
                                                                                                              ], 'public/css/app-combine.css')
                                                                                                      //    .postCss('resources/css/app.css', 'public/css', [
                                                                                                      //        require('tailwindcss')
                                                                                                      //    ])
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      mix.js('resources/js/app.js', 'public/js')
                                                                                                          .sass('resources/sass/app.scss', 'public/css')
                                                                                                          .styles(
                                                                                                              [
                                                                                                                  'resources/asset/jqueryui/jquery-ui.min.css',
                                                                                                                  'resources/asset/jqueryui/jquery-ui.structure.min.css',
                                                                                                                  'resources/asset/fontawesome/css/all.css',
                                                                                                              ], 'public/css/vendor-combine.css')
                                                                                                          .styles(
                                                                                                              [
                                                                                                                  'public/css/sidenav.css',
                                                                                                                  'public/css/general.css',
                                                                                                                  'public/css/stt.css',
                                                                                                                  'public/css/ilightbox.css',
                                                                                                                  'public/css/flex.css',
                                                                                                                  'public/css/general.css',
                                                                                                                  'public/css/smartforms/smart-forms.css',
                                                                                                                  'public/css/smartforms/smart-themes/blue.css',
                                                                                                                  'public/css/hover-min.css',
                                                                                                                  'public/css/klik.css',
                                                                                                                  'public/css/spectrum.css',
                                                                                                                  'public/css/infobox.css',
                                                                                                              ], 'public/css/app-combine.css')
                                                                                                      //    .postCss('resources/css/app.css', 'public/css', [
                                                                                                      //        require('tailwindcss')
                                                                                                      //    ])
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      How can i use Tailwind using Sass on Vue
                                                                                                      JavaScriptdot imgLines of Code : 4dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      npm uninstall tailwindcss postcss autoprefixer
                                                                                                      
                                                                                                      npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
                                                                                                      
                                                                                                      installing tailwindcss v.3.0.15 using PostCSS doesn't work properly
                                                                                                      JavaScriptdot imgLines of Code : 36dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      npm install -D tailwindcss postcss autoprefixer
                                                                                                      npx tailwindcss init
                                                                                                      
                                                                                                      module.exports = {
                                                                                                        plugins: {
                                                                                                          tailwindcss: {},
                                                                                                          autoprefixer: {},
                                                                                                        }
                                                                                                      }
                                                                                                      
                                                                                                      module.exports = {
                                                                                                        content: ["*"],
                                                                                                        theme: {
                                                                                                          extend: {},
                                                                                                        },
                                                                                                        plugins: [],
                                                                                                      }
                                                                                                      
                                                                                                      @tailwind base;
                                                                                                      @tailwind components;
                                                                                                      @tailwind utilities;
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                        
                                                                                                        
                                                                                                        
                                                                                                      
                                                                                                      
                                                                                                        
                                                                                                          Hello world!
                                                                                                        
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      Unable to build CSS with tailwind
                                                                                                      JavaScriptdot imgLines of Code : 8dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      $ npm install tailwindcss
                                                                                                      
                                                                                                      $ npm i -D autoprefixer postcss
                                                                                                      
                                                                                                      $ npx tailwindcss init
                                                                                                      
                                                                                                      $ npx tailwindcss@latest build ./src/styles.css -o ./dist/styles.css
                                                                                                      
                                                                                                      Does Tailwind CSS work with express sendFile?
                                                                                                      JavaScriptdot imgLines of Code : 35dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      
                                                                                                      
                                                                                                      const express = require("express");
                                                                                                      const path = require("path");
                                                                                                      const app = express();
                                                                                                      const port = 9000;
                                                                                                      
                                                                                                      app.use(express.static("./public"));
                                                                                                      
                                                                                                      app.get("/", (req, res) => {
                                                                                                        res.sendFile(path.join(__dirname, "/public/home.html"));
                                                                                                      });
                                                                                                      
                                                                                                      app.listen(port, () => {
                                                                                                        console.log(`Server is  listening at http://localhost:${port}`);
                                                                                                      });
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                        
                                                                                                          
                                                                                                          
                                                                                                          
                                                                                                          Express & TailwindCss
                                                                                                        
                                                                                                        
                                                                                                          
                                                                                                            
                                                                                                              Express with TailwindCss
                                                                                                            
                                                                                                            It does works! ;-)
                                                                                                          
                                                                                                        
                                                                                                      
                                                                                                      
                                                                                                      tailwind doesn't with npm run dev
                                                                                                      JavaScriptdot imgLines of Code : 6dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      # Using NPM?
                                                                                                      npm install -D tailwindcss
                                                                                                      
                                                                                                      # Using yarn?
                                                                                                      yarn add tailwindcss -D
                                                                                                      
                                                                                                      How do you configure sails + tailwindcss to work together
                                                                                                      JavaScriptdot imgLines of Code : 42dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      npm i --save-dev tailwindcss grunt-postcss postcss autoprefixer
                                                                                                      npx tailwind init
                                                                                                      
                                                                                                      @tailwind base;
                                                                                                      @tailwind components;
                                                                                                      @tailwind utilities;
                                                                                                      
                                                                                                      module.exports = function (grunt) {
                                                                                                        grunt.config.set("postcss", {
                                                                                                          options: {
                                                                                                            map: true,
                                                                                                            processors: [require("tailwindcss")("./tailwind.config.js")],
                                                                                                          },
                                                                                                          dist: {
                                                                                                            expand: true,
                                                                                                            cwd: "assets/styles/tailwindcss",
                                                                                                            src: ["tailwind.css"],
                                                                                                            dest: ".tmp/public/styles",
                                                                                                            ext: ".css",
                                                                                                          },
                                                                                                        });
                                                                                                      
                                                                                                        grunt.loadNpmTasks("grunt-postcss");
                                                                                                      };
                                                                                                      
                                                                                                      module.exports = function (grunt) {
                                                                                                        grunt.registerTask("compileAssets", [
                                                                                                          "clean:dev",
                                                                                                          "less:dev",
                                                                                                          "copy:dev",
                                                                                                          "postcss", // add this one
                                                                                                        ]);
                                                                                                      };
                                                                                                      
                                                                                                        grunt.registerTask("syncAssets", [
                                                                                                          "less:dev",
                                                                                                          "copy:dev",
                                                                                                          "postcss", // add this one
                                                                                                        ]);
                                                                                                      
                                                                                                      sails lift
                                                                                                      
                                                                                                      vue-tabs-component custom classes
                                                                                                      JavaScriptdot imgLines of Code : 17dot imgLicense : Strong Copyleft (CC BY-SA 4.0)
                                                                                                      copy iconCopy
                                                                                                      npm install tailwindcss --save-dev
                                                                                                      
                                                                                                      ./node_modules/.bin/tailwind init tailwind.js
                                                                                                      
                                                                                                      @tailwind preflight;
                                                                                                      @tailwind components;
                                                                                                      @tailwind utilities;
                                                                                                      
                                                                                                      "scripts": {
                                                                                                        "tailwind:build": "./node_modules/.bin/tailwind build ./input_path/main.css -c ./tailwind.js -o ./outputh_path/styles.css",
                                                                                                        "serve": "npm run tailwind:build && vue-cli-service serve",
                                                                                                        "build": "npm run tailwind:build && vue-cli-service build",
                                                                                                        "lint": "vue-cli-service lint"
                                                                                                      }
                                                                                                      
                                                                                                      
                                                                                                      
                                                                                                      Community Discussions

                                                                                                      Trending Discussions on tailwindcss

                                                                                                      Items in Flexbox get Squished due to Full Width Item
                                                                                                      chevron right
                                                                                                      What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?
                                                                                                      chevron right
                                                                                                      focus:outline-none not working Tailwind CSS with Laravel
                                                                                                      chevron right
                                                                                                      Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?
                                                                                                      chevron right
                                                                                                      Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible
                                                                                                      chevron right
                                                                                                      tailwind.css not being generated in a Rails 7 project in Heroku
                                                                                                      chevron right
                                                                                                      Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?
                                                                                                      chevron right
                                                                                                      How do I fix tailwindcss-cli from throwing TypeError: Object.fromEntries is not a function?
                                                                                                      chevron right
                                                                                                      Nuxt3: how to use tailwindcss
                                                                                                      chevron right
                                                                                                      Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser'
                                                                                                      chevron right

                                                                                                      QUESTION

                                                                                                      Items in Flexbox get Squished due to Full Width Item
                                                                                                      Asked 2022-Apr-03 at 14:06

                                                                                                      I have a flexbox which consists of one input box and two circular divs. I want the input field to take up all the space that the circle divs don't need, hence I assigned it a w-full.

                                                                                                      However, the input field takes up more space than it should and in effect causes the divs to be squished and not correct circles.

                                                                                                      Image:

                                                                                                      Code:

                                                                                                      
                                                                                                        
                                                                                                         
                                                                                                        
                                                                                                      
                                                                                                      

                                                                                                      ANSWER

                                                                                                      Answered 2022-Apr-03 at 14:06

                                                                                                      Use flex-grow or grow instead of w-full in your input if you want it to grow to all available space.

                                                                                                      
                                                                                                      

                                                                                                      Source https://stackoverflow.com/questions/71726596

                                                                                                      QUESTION

                                                                                                      What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?
                                                                                                      Asked 2022-Mar-29 at 11:40

                                                                                                      The number of variants that exist to showcase how postcss.config.js has to be configured is extremely confusing. There are examples (like the one at the tailwindcss documentation) that use this:

                                                                                                      // Example 1:
                                                                                                      module.exports = {
                                                                                                        plugins: {
                                                                                                          tailwindcss: {},
                                                                                                          autoprefixer: {},
                                                                                                        },
                                                                                                      }
                                                                                                      

                                                                                                      then there are those which require the libraries:

                                                                                                      // Example 2:
                                                                                                      module.exports = {
                                                                                                        plugins: {
                                                                                                          require('tailwindcss'),
                                                                                                          require('postcss-preset-env')({
                                                                                                            stage: 0,
                                                                                                            'nesting-rules': true
                                                                                                          })
                                                                                                        },
                                                                                                      }
                                                                                                      

                                                                                                      Others require external libs before they configure module.exports:

                                                                                                      // Example 3:
                                                                                                      
                                                                                                      const tailwindcss = require('tailwindcss');
                                                                                                      const postcssPresetEnv = require('postcss-preset-env');
                                                                                                      
                                                                                                      
                                                                                                      module.exports = {
                                                                                                        plugins: {
                                                                                                          tailwindcss,
                                                                                                          postcssPresetEnv
                                                                                                        },
                                                                                                      }
                                                                                                      

                                                                                                      and again some more that are necessary, when a configuration file that is not named according to the defaults has to be incorporated.

                                                                                                      Today I get this error, when running yarn dev with a postcss.config.js as show in Example 2:

                                                                                                      Syntax Error: /[path]/_pod-test/postcss.config.js:3
                                                                                                          require('tailwindcss'),
                                                                                                                   ^^^^^^^^^^^
                                                                                                      
                                                                                                      SyntaxError: Unexpected string
                                                                                                      

                                                                                                      When I remove the line with "tailwindcss", the same thing happens for "postcss-preset-env":

                                                                                                      Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
                                                                                                          require('postcss-preset-env')({
                                                                                                                  ^^^^^^^^^^^^^^^^^^^^
                                                                                                      
                                                                                                      SyntaxError: Unexpected string
                                                                                                      

                                                                                                      When I then switch to a setup as shown in example 1, I get this error:

                                                                                                      Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
                                                                                                      Migration guide for end-users:
                                                                                                      https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
                                                                                                      

                                                                                                      I do use postcss 8.3.9!

                                                                                                      This all happens in a project that was setup with vue-cli as a Vue2 project.

                                                                                                      Which witch craft do I have to apply to make this setup work?

                                                                                                      ANSWER

                                                                                                      Answered 2021-Oct-26 at 14:58

                                                                                                      In your terminal run the below command to install tailwind css and its dependencies via npm.

                                                                                                      npm install tailwindcss postcss autoprefixer
                                                                                                      

                                                                                                      It is possible to get the error message that you mentioned when you try to run the project

                                                                                                      Error: PostCSS plugin tailwindcss requires PostCSS 8.
                                                                                                      

                                                                                                      Run the following code to uninstall previous installation and fix the error

                                                                                                      npm uninstall tailwindcss postcss autoprefixer 
                                                                                                      npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
                                                                                                      

                                                                                                      Next, you need to generate both Tailwind and PostCSS config files

                                                                                                      npx tailwindcss init -p
                                                                                                      

                                                                                                      Your config files should look like this

                                                                                                      postcss.config file

                                                                                                      module.exports = {
                                                                                                        plugins: {
                                                                                                          tailwindcss: {},
                                                                                                          autoprefixer: {},
                                                                                                        },
                                                                                                      };
                                                                                                      

                                                                                                      tailwindcss.config file

                                                                                                      module.exports = {
                                                                                                        future: {
                                                                                                          // removeDeprecatedGapUtilities: true,
                                                                                                          // purgeLayersByDefault: true,
                                                                                                        },
                                                                                                        purge: [],
                                                                                                        theme: {
                                                                                                          extend: {},
                                                                                                        },
                                                                                                        variants: {},
                                                                                                        plugins: [],
                                                                                                      };
                                                                                                      

                                                                                                      Finally, open up your main.js file and import the tailwind.css file containing the tailwind directives i.e

                                                                                                      import './css/tailwind.css'
                                                                                                      

                                                                                                      Source https://stackoverflow.com/questions/69725289

                                                                                                      QUESTION

                                                                                                      focus:outline-none not working Tailwind CSS with Laravel
                                                                                                      Asked 2022-Mar-28 at 23:33

                                                                                                      I am using Tailwind CSS for my Laravel application, and want to remove the focus border on the input boxes. According to the documentation, focus:outline-none should achieve this, although it is not working for me and the border still appears on focus.

                                                                                                      It looks like I am targeting the wrong thing, as if I do focus:outline-black, I can see a black outline as well as the standard blue one on focus.

                                                                                                      focus:border-none also does not fix the problem.

                                                                                                      Any ideas?

                                                                                                      
                                                                                                      
                                                                                                      .text-input {
                                                                                                          @apply focus:outline:none;
                                                                                                      }
                                                                                                      

                                                                                                      tailwind.config.js

                                                                                                      const defaultTheme = require('tailwindcss/defaultTheme');
                                                                                                      const colors = require('tailwindcss/colors');
                                                                                                      
                                                                                                      module.exports = {
                                                                                                          mode: 'jit',
                                                                                                          purge: [
                                                                                                              './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
                                                                                                              './vendor/laravel/jetstream/**/*.blade.php',
                                                                                                              './storage/framework/views/*.php',
                                                                                                              './resources/views/**/*.blade.php',
                                                                                                          ],
                                                                                                      
                                                                                                          theme: {
                                                                                                              extend: {
                                                                                                                  fontFamily: {
                                                                                                                      sans: ['Nunito', ...defaultTheme.fontFamily.sans],
                                                                                                                  },            
                                                                                                              },
                                                                                                              colors: {                      
                                                                                                                  black: colors.black,
                                                                                                                  white: colors.white,
                                                                                                                  gray: colors.trueGray,
                                                                                                                  indigo: colors.indigo,
                                                                                                                  red: colors.rose,
                                                                                                                  yellow: colors.amber,
                                                                                                                  blue: colors.blue,
                                                                                                              },
                                                                                                          },
                                                                                                      
                                                                                                          plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
                                                                                                      };
                                                                                                      

                                                                                                      webpack.mix.js

                                                                                                      const mix = require('laravel-mix');
                                                                                                      
                                                                                                      /*
                                                                                                       |--------------------------------------------------------------------------
                                                                                                       | Mix Asset Management
                                                                                                       |--------------------------------------------------------------------------
                                                                                                       |
                                                                                                       | Mix provides a clean, fluent API for defining some Webpack build steps
                                                                                                       | for your Laravel applications. By default, we are compiling the CSS
                                                                                                       | file for the application as well as bundling up all the JS files.
                                                                                                       |
                                                                                                       */
                                                                                                      
                                                                                                      mix.js('resources/js/app.js', 'public/js')
                                                                                                          .postCss('resources/css/app.css', 'public/css', [
                                                                                                              require('postcss-import'),
                                                                                                              require('tailwindcss'),
                                                                                                          ]);
                                                                                                      
                                                                                                      if (mix.inProduction()) {
                                                                                                          mix.version();
                                                                                                      }
                                                                                                      

                                                                                                      ANSWER

                                                                                                      Answered 2021-Nov-16 at 02:25

                                                                                                      Maybe you can try add focus:outline-none direct in your class.

                                                                                                      Demo : https://jsfiddle.net/p73xfy1h/

                                                                                                      Source https://stackoverflow.com/questions/69981112

                                                                                                      QUESTION

                                                                                                      Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?
                                                                                                      Asked 2022-Mar-26 at 19:43

                                                                                                      Edit: This issue is now deprecated since version 3.0.0 of tailwind works with react without having to use CRACO.

                                                                                                      While trying to use Tailwind with React in JIT mode the classes that I add have no styles, even after refreshing the page. I have to restart the server for the styles to take effect.

                                                                                                      tailwind.config.js:

                                                                                                      module.exports = {
                                                                                                          mode: "jit",
                                                                                                          purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
                                                                                                          ...
                                                                                                      }
                                                                                                      

                                                                                                      craco.config.js:

                                                                                                      module.exports = {
                                                                                                          style: {
                                                                                                              postcss: {
                                                                                                                  plugins: [require("tailwindcss"), require("autoprefixer")]
                                                                                                              }
                                                                                                          }
                                                                                                      }
                                                                                                      

                                                                                                      package.json:

                                                                                                      {
                                                                                                          "name": "random-name",
                                                                                                          "version": "0.1.0",
                                                                                                          "private": true,
                                                                                                          "dependencies": {
                                                                                                              "@craco/craco": "^6.3.0",
                                                                                                              "react": "^17.0.2",
                                                                                                              "react-dom": "^17.0.2",
                                                                                                              "react-scripts": "4.0.3",
                                                                                                              "web-vitals": "^1.1.2"
                                                                                                          },
                                                                                                          "scripts": {
                                                                                                              "start": "craco start",
                                                                                                              "build": "craco build",
                                                                                                              "test": "craco test",
                                                                                                              "eject": "react-scripts eject"
                                                                                                          },
                                                                                                          "devDependencies": {
                                                                                                              "@tailwindcss/postcss7-compat": "^2.2.17",
                                                                                                              "autoprefixer": "^9.8.8",
                                                                                                              "postcss": "^7.0.39",
                                                                                                              "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
                                                                                                          }
                                                                                                      }
                                                                                                      

                                                                                                      ANSWER

                                                                                                      Answered 2021-Nov-05 at 14:41

                                                                                                      In package.json you should activate watch mode on the start script like

                                                                                                      "scripts": {
                                                                                                         "start": "TAILWIND_MODE=watch craco start",
                                                                                                         ...
                                                                                                      }
                                                                                                      

                                                                                                      Source https://stackoverflow.com/questions/69710177

                                                                                                      QUESTION

                                                                                                      Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible
                                                                                                      Asked 2022-Mar-25 at 06:28

                                                                                                      i'm trying to install Tailwindcss in my nuxt project

                                                                                                      I use fresh install from nuxt https://v3.nuxtjs.org/getting-started/installation

                                                                                                      npx nuxi init nuxt3-app
                                                                                                      

                                                                                                      and follow tailwindcss installation

                                                                                                      https://tailwindcss.com/docs/guides/nuxtjs

                                                                                                      But when i start the app npm run dev i got this error

                                                                                                      ERROR  Cannot restart nuxt:  postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3   
                                                                                                      

                                                                                                      I don't know how to fix it, and cannot find any answer online, i appreciate any help, thankyou

                                                                                                      ANSWER

                                                                                                      Answered 2021-Dec-10 at 10:41

                                                                                                      By using npx nuxi init nuxt3-app, you're creating a Nuxt v3 app. Nuxt 3 is still very much in public beta, so it's likely you'll come across issues which the team would no doubt love to take a look at for you- if you raise it as an issue on their GitHub.

                                                                                                      If it suits your needs, Nuxt v2 is available as a stable alternative. Follow the guide that you referenced to setup a new app, and you shouldn't have any issues.

                                                                                                      Source https://stackoverflow.com/questions/70302520

                                                                                                      QUESTION

                                                                                                      tailwind.css not being generated in a Rails 7 project in Heroku
                                                                                                      Asked 2022-Mar-24 at 18:52

                                                                                                      I have a Rails 7 project using TailwindCSS deployed to Heroku that is not building tailwind.css during rake asset:precompile and I don't know why. When I try to access the application, it crashes with this error:

                                                                                                      I, [2022-03-23T17:35:18.429029 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Started GET "/" for XX.XX.XX.XX at 2022-03-23 17:35:18 +0000
                                                                                                      I, [2022-03-23T17:35:18.433526 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Processing by StaticController#index as HTML
                                                                                                      I, [2022-03-23T17:35:18.439133 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]   Rendered static/index.html.erb within layouts/application (Duration: 0.6ms | Allocations: 184)
                                                                                                      I, [2022-03-23T17:35:18.446294 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]   Rendered layout layouts/application.html.erb (Duration: 7.8ms | Allocations: 1205)
                                                                                                      I, [2022-03-23T17:35:18.446595 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Completed 500 Internal Server Error in 13ms (Allocations: 2512)
                                                                                                      F, [2022-03-23T17:35:18.447716 #8] FATAL -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292] ActionView::Template::Error (The asset "tailwind.css" is not present in the asset pipeline.
                                                                                                      ):
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]     12:     
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]     13:     <%= csrf_meta_tags %>
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]     14:     <%= csp_meta_tag %>
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]     15:     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]     16:     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]     17:     <%= javascript_importmap_tags %>
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]     18:   
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292]
                                                                                                      [4f6eaac8-942c-4ee5-af10-172663b1a292] app/views/layouts/application.html.erb:15
                                                                                                      

                                                                                                      I actually have two projects that are set up pretty much identically (they have different functionality though) and the other one works.

                                                                                                      I have added

                                                                                                      config.assets.css_compressor = nil
                                                                                                      

                                                                                                      to production.rb, test.rb and development.rb (just in case).

                                                                                                      I'm installing the latest tailwindcss-rails at the time of this writing, 2.0.8. I'm also installing sassc-rails because it's needed for rails_admin but that's also true for the other project where that is needed.

                                                                                                      Here's the curious thing. If I open a console to that Heroku project and run rake asset:precompile it actually finishes creating the missing files:

                                                                                                      ~ $ rake assets:precompile
                                                                                                      + /app/vendor/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.8-x86_64-linux/exe/x86_64-linux/tailwindcss -i /app/app/assets/stylesheets/application.tailwind.css -o /app/app/assets/builds/tailwind.css -c /app/config/tailwind.config.js --minify
                                                                                                      
                                                                                                      Done in 821ms.
                                                                                                      W, [2022-03-19T12:38:43.514430 #6]  WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/popper.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/popper.js
                                                                                                      W, [2022-03-19T12:38:43.534443 #6]  WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/bootstrap.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/bootstrap.js
                                                                                                      I, [2022-03-19T12:38:43.744157 #6]  INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css
                                                                                                      I, [2022-03-19T12:38:43.744385 #6]  INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css.gz
                                                                                                      ~ $
                                                                                                      

                                                                                                      Why didn't that work during deployment? I can see it's running it:

                                                                                                             Using stimulus-rails 1.0.4
                                                                                                             Using tailwindcss-rails 2.0.8 (x86_64-linux)
                                                                                                             Bundle complete! 28 Gemfile dependencies, 90 gems now installed.
                                                                                                             Gems in the groups 'development' and 'test' were not installed.
                                                                                                             Bundled gems are installed into `./vendor/bundle`
                                                                                                             Bundle completed (0.38s)
                                                                                                             Cleaning up the bundler cache.
                                                                                                             Removing bundler (2.2.33)
                                                                                                      -----> Detecting rake tasks
                                                                                                      -----> Preparing app for Rails asset pipeline
                                                                                                             Running: rake assets:precompile
                                                                                                             
                                                                                                             Done in 788ms.
                                                                                                             Asset precompilation completed (3.58s)
                                                                                                             Cleaning assets
                                                                                                             Running: rake assets:clean
                                                                                                      -----> Detecting rails configuration
                                                                                                      -----> Discovering process types
                                                                                                             Procfile declares types     -> release, web, worker
                                                                                                             Default types for buildpack -> console, rake
                                                                                                      -----> Compressing...
                                                                                                             Done: 78.7M
                                                                                                      -----> Launching...
                                                                                                      

                                                                                                      ANSWER

                                                                                                      Answered 2022-Mar-23 at 15:15

                                                                                                      Try running the following commands on your local machine:

                                                                                                      gem install bundler
                                                                                                      bundle update --bundler
                                                                                                      bundle lock --add-platform x86_64-linux
                                                                                                      

                                                                                                      Then commit these changes, and deploy again.

                                                                                                      Source https://stackoverflow.com/questions/71538223

                                                                                                      QUESTION

                                                                                                      Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?
                                                                                                      Asked 2022-Mar-23 at 09:04

                                                                                                      I've been upgrading my CRA project to TailwindCSS 3, but now CSS nesting no longer works. Upon starting the server, the console spits out:

                                                                                                      (8:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
                                                                                                      Please enable a CSS nesting plugin *before* Tailwind in your configuration.
                                                                                                      See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
                                                                                                      

                                                                                                      However, I don't see what must be done to correct this. I've tried setting up a plain CRA project with Tailwind (following this guide) just to make sure I have no conflicts, and still no success.

                                                                                                      postcss.config.js:

                                                                                                      module.exports = {
                                                                                                        plugins: {
                                                                                                          "tailwindcss/nesting": {},
                                                                                                          tailwindcss: {},
                                                                                                          autoprefixer: {},
                                                                                                        },
                                                                                                      };
                                                                                                      

                                                                                                      As you can see, I have added the nesting plugin before Tailwind. It appears to me as if the plugin isn't being detected whatsoever. I've also tried replacing it with postcss-nesting with same outcome.

                                                                                                      Note: I've also tried using the array syntax with require('tailwind/nesting') like the guide suggests.

                                                                                                      Interestingly, removing all plugins from postcss.config.js (or using a require that fails to resolve) still outputs the same error, implying that this file isn't needed to get Tailwind to load. Maybe I am missing something that causes the whole postcss.config.js file to not be loaded in the first place?

                                                                                                      index.js:

                                                                                                      import React from "react";
                                                                                                      import ReactDOM from "react-dom";
                                                                                                      import "./index.css";
                                                                                                      
                                                                                                      ReactDOM.render(
                                                                                                        
                                                                                                          
                                                                                                            aaa
                                                                                                            bbb
                                                                                                          
                                                                                                        ,
                                                                                                        document.getElementById("root")
                                                                                                      );
                                                                                                      

                                                                                                      index.css:

                                                                                                      @tailwind base;
                                                                                                      @tailwind components;
                                                                                                      @tailwind utilities;
                                                                                                      
                                                                                                      .a {
                                                                                                        @apply text-blue-500;
                                                                                                      
                                                                                                        .b {
                                                                                                          @apply text-green-500;
                                                                                                        }
                                                                                                      }
                                                                                                      

                                                                                                      package.json: (omitted things for brevity)

                                                                                                      {
                                                                                                        "name": "tailwindtest",
                                                                                                        "dependencies": {
                                                                                                          "react": "^17.0.2",
                                                                                                          "react-dom": "^17.0.2",
                                                                                                          "react-scripts": "5.0.0"
                                                                                                        },
                                                                                                        "scripts": {
                                                                                                          "start": "react-scripts start",
                                                                                                          "build": "react-scripts build",
                                                                                                          "test": "react-scripts test",
                                                                                                          "eject": "react-scripts eject"
                                                                                                        },
                                                                                                        "devDependencies": {
                                                                                                          "autoprefixer": "^10.4.2",
                                                                                                          "postcss": "^8.4.5",
                                                                                                          "tailwindcss": "^3.0.12"
                                                                                                        }
                                                                                                      }
                                                                                                      

                                                                                                      ANSWER

                                                                                                      Answered 2022-Feb-03 at 18:38

                                                                                                      This is mostly just bad news.

                                                                                                      Create React App's Tailwind support means that they will detect tailwind.config.js in the project and add tailwindcss to their existing postcss configuration. Source in CRA

                                                                                                      The guide that Tailwind offers on their site creates a dummy postcss.config.js - Making changes in this file does not change the actual postcss configuration. (misleading if anything)

                                                                                                      This is a known issue currently - Github discussion on Tailwind support PR between Adam Wathan (Tailwind founder) and Ian Sutherland (CRA maintainer). But it does not seem like there is an intention to be fixed soon.

                                                                                                      If you want to use nesting (or any PostCSS plugin really) is to eject from CRA using:

                                                                                                      npm run eject
                                                                                                      

                                                                                                      After ejecting you can find CRA's postcss configuration in config/webpack.config.js - look for postcss-loader. Editing the configuration there can enable any postcss features.

                                                                                                      PS: Look out for postcss-preset-env in the default configuration while enabling nesting. Tailwind requires you to edit configuration if this is present.

                                                                                                      Source https://stackoverflow.com/questions/70665302

                                                                                                      QUESTION

                                                                                                      How do I fix tailwindcss-cli from throwing TypeError: Object.fromEntries is not a function?
                                                                                                      Asked 2022-Mar-13 at 18:15

                                                                                                      I've been following Tailwind's tutorials and when. I get to the part of the tutorial where they ask me to run npx tailwindcss-cli build css/tailwind.css -o build/tailwind.css, I get the following error. How do I solve this?

                                                                                                      (node:5568) ExperimentalWarning: The fs.promises API is experimental
                                                                                                      /Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242
                                                                                                        ...Object.fromEntries(Object.entries(corePlugins).map(([pluginName, plugin]) => {
                                                                                                                  ^
                                                                                                      
                                                                                                      TypeError: Object.fromEntries is not a function
                                                                                                          at Object. (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242:13)
                                                                                                          at Module._compile (internal/modules/cjs/loader.js:778:30)
                                                                                                          at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
                                                                                                          at Module.load (internal/modules/cjs/loader.js:653:32)
                                                                                                          at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
                                                                                                          at Function.Module._load (internal/modules/cjs/loader.js:585:3)
                                                                                                          at Module.require (internal/modules/cjs/loader.js:692:17)
                                                                                                          at require (internal/modules/cjs/helpers.js:25:18)
                                                                                                          at Object. (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:36:43)
                                                                                                          at Module._compile (internal/modules/cjs/loader.js:778:30)
                                                                                                      

                                                                                                      I've tried deleting npm, updating npm, removing my package-lock and node modules and restarting, and adding -i. all to no prevail. As is made apparent from the youtube series I linked, I'm just learning tailwind, so I'm sure it's a super stupid mistake.

                                                                                                      ANSWER

                                                                                                      Answered 2021-Aug-10 at 12:03

                                                                                                      The issue originated from your node version. Please try this:

                                                                                                      sudo npm i -g n
                                                                                                      

                                                                                                      Than inside your project folder

                                                                                                      n latest
                                                                                                      

                                                                                                      after that close your current terminal, since it will remember the old node location, open a new one and it should be fixed.

                                                                                                      Source https://stackoverflow.com/questions/68613313

                                                                                                      QUESTION

                                                                                                      Nuxt3: how to use tailwindcss
                                                                                                      Asked 2022-Mar-02 at 14:50

                                                                                                      Very first try on Nuxt3 via Nuxt3 Starter

                                                                                                      I wonder how can I use tailwindcss in Nuxt3 Starter manually.

                                                                                                      (Not via @nuxtjs/tailwindcss , because it's for Nuxt2, and not work with Nuxt3.)

                                                                                                      I created a blank Nuxt3 project by

                                                                                                      npx degit "nuxt/starter#v3" my-nuxt3-project
                                                                                                      

                                                                                                      then, I installed the tailwindcss manually

                                                                                                      npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
                                                                                                      

                                                                                                      nuxt.config.ts

                                                                                                      export default {
                                                                                                          css: [
                                                                                                              '~/assets/tailwind.css',
                                                                                                          ]
                                                                                                      }
                                                                                                      

                                                                                                      assets/tailwind.css

                                                                                                      @tailwind base;
                                                                                                      @tailwind components;
                                                                                                      @tailwind utilities;
                                                                                                      

                                                                                                      but I can only get the raw code but not the compiled css:

                                                                                                      How can I use tailwindcss in Nuxt3?

                                                                                                      Any help is greatly appreciated!

                                                                                                      online mini demo

                                                                                                      ANSWER

                                                                                                      Answered 2021-Oct-04 at 04:17

                                                                                                      Maybe your problem is because you need a tailwindcss.config.js.

                                                                                                      For this, simply type in the console:

                                                                                                      yarn run tailwindcss init
                                                                                                      

                                                                                                      Source https://stackoverflow.com/questions/69114800

                                                                                                      QUESTION

                                                                                                      Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser'
                                                                                                      Asked 2022-Feb-25 at 06:57

                                                                                                      After upgrading my Angular from 12.0.2 to 13.0.3 everything was working fine. I was trying to remove some packages that was not used such as jquery, and some other i do not remember etc. and after that I deleted node_modules, package-lock.json and run npm i to installed all packages again. After that I recieved bunch of errors which then i again reverted package.json and tried npm i then I am getting below errors. And I am unable to fixed it.

                                                                                                      Any idea how can i resolve this ?

                                                                                                      ./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:9-31 - Error: export 'ɵsupportsWebAnimations' (imported as 'ɵsupportsWebAnimations') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɵAnimation, ɵAnimationEngine, ɵAnimationStyleNormalizer, ɵNoopAnimationDriver, ɵNoopAnimationStyleNormalizer, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵWebAnimationsStyleNormalizer, ɵallowPreviousPlayerStylesMerge, ɵcontainsElement, ɵinvokeQuery, ɵvalidateStyleProperty)
                                                                                                      
                                                                                                      ./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:69-88 - Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɵAnimation, ɵAnimationEngine, ɵAnimationStyleNormalizer, ɵNoopAnimationDriver, ɵNoopAnimationStyleNormalizer, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵWebAnimationsStyleNormalizer, ɵallowPreviousPlayerStylesMerge, ɵcontainsElement, ɵinvokeQuery, ɵvalidateStyleProperty)
                                                                                                      

                                                                                                      package.json

                                                                                                      "private": true,
                                                                                                        "browser": {
                                                                                                          "fs": false,
                                                                                                          "path": false,
                                                                                                          "os": false
                                                                                                        },
                                                                                                        "dependencies": {
                                                                                                          "@angular-material-components/datetime-picker": "6.0.3",
                                                                                                          "@angular/animations": "^13.0.3",
                                                                                                          "@angular/cdk": "^13.0.3",
                                                                                                          "@angular/common": "13.0.3",
                                                                                                          "@angular/compiler": "13.0.3",
                                                                                                          "@angular/core": "13.0.3",
                                                                                                          "@angular/fire": "^6.1.4",
                                                                                                          "@angular/forms": "13.0.3",
                                                                                                          "@angular/material": "13.0.3",
                                                                                                          "@angular/material-moment-adapter": "13.0.3",
                                                                                                          "@angular/platform-browser": "13.0.3",
                                                                                                          "@angular/platform-browser-dynamic": "13.0.3",
                                                                                                          "@angular/platform-server": "13.0.3",
                                                                                                          "@angular/router": "13.0.3",
                                                                                                          "@nguniversal/express-engine": "^12.0.0",
                                                                                                          "bootstrap": "^5.1.3",
                                                                                                          "crypto-js": "4.0.0",
                                                                                                          "domino": "^2.1.6",
                                                                                                          "express": "^4.15.2",
                                                                                                          "firebase": "^8.10.0",
                                                                                                          "highlight.js": "10.7.2",
                                                                                                          "lodash-es": "4.17.21",
                                                                                                          "moment": "^2.29.1",
                                                                                                          "ngx-moment": "^5.0.0",
                                                                                                          "node-fetch": "^2.6.1",
                                                                                                          "rrule": "2.6.8",
                                                                                                          "rxjs": "7.1.0",
                                                                                                          "tslib": "2.2.0",
                                                                                                          "zone.js": "~0.11.4"
                                                                                                        },
                                                                                                        "devDependencies": {
                                                                                                          "@angular-devkit/build-angular": "13.0.3",
                                                                                                          "@angular/cli": "13.0.3",
                                                                                                          "@angular/compiler-cli": "13.0.3",
                                                                                                          "@angular/language-service": "13.0.3",
                                                                                                          "@nguniversal/builders": "^12.0.0",
                                                                                                          "@ngx-builders/analyze": "^2.3.0",
                                                                                                          "@types/crypto-js": "4.0.1",
                                                                                                          "@types/express": "^4.17.0",
                                                                                                          "@types/highlight.js": "9.12.4",
                                                                                                          "@types/jasmine": "3.6.10",
                                                                                                          "@types/jasminewd2": "2.0.8",
                                                                                                          "@types/lodash-es": "4.17.4",
                                                                                                          "@types/node": "15.0.1",
                                                                                                          "bufferutil": "^4.0.3",
                                                                                                          "codelyzer": "6.0.2",
                                                                                                          "jasmine-core": "3.7.1",
                                                                                                          "jasmine-spec-reporter": "7.0.0",
                                                                                                          "karma": "6.3.2",
                                                                                                          "karma-chrome-launcher": "3.1.0",
                                                                                                          "karma-coverage-istanbul-reporter": "3.0.3",
                                                                                                          "karma-jasmine": "4.0.1",
                                                                                                          "karma-jasmine-html-reporter": "1.5.4",
                                                                                                          "ngx-owl-carousel-o": "^6.0.0",
                                                                                                          "protractor": "7.0.0",
                                                                                                          "tailwindcss": "2.1.2",
                                                                                                          "ts-node": "9.1.1",
                                                                                                          "tslint": "6.1.2",
                                                                                                          "typescript": "~4.4.0",
                                                                                                          "utf-8-validate": "^5.0.5",
                                                                                                          "ws": "^8.2.2",
                                                                                                          "xhr2": "^0.2.1"
                                                                                                        }
                                                                                                      }
                                                                                                      

                                                                                                      I see that the issue is with

                                                                                                      @angular/animations package.

                                                                                                      When I remove that and manually add that package from my old backup it works fine.

                                                                                                      ng-project/node_modules/@angular/animations

                                                                                                      I replace this folder completely from my backup and it worked without re-compile.

                                                                                                      Again if I run npm installit will not work. Help me here to understand.

                                                                                                      ANSWER

                                                                                                      Answered 2022-Feb-25 at 06:57

                                                                                                      As I researched a lot and did not find a solution to this issue as it's occurring only on the newer version of the animation package.

                                                                                                      I tried the below versions:

                                                                                                      • 13.2.4 (Latest one) throwing same es error

                                                                                                      • 13.2.3 throwing same es error

                                                                                                      • 13.2.2 throwing same es error

                                                                                                      • 13.2.1 throwing same es error

                                                                                                      • 13.2.0 working without error.

                                                                                                      So I think for a temporary fix you should update your package.json by pointing to a specific version of this npm like below.

                                                                                                      "@angular/animations": "13.2.0"
                                                                                                      

                                                                                                      this or lower version will not throw any error and all newer versions have the ɵsupportsWebAnimations issue.

                                                                                                      Ref of issue: https://github.com/angular/angular/issues/45191

                                                                                                      Edit:

                                                                                                      If anyone wants a proper solution and wants the latest version of @angular/animations then they need to be the exact same version as the other Angular framework packages by doing ng update so once all the core Angular framework packages match with the same version you will no longer see the above error and can build your app without error.

                                                                                                      Source https://stackoverflow.com/questions/71146965

                                                                                                      Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                                                                                                      Vulnerabilities

                                                                                                      No vulnerabilities reported

                                                                                                      Install tailwindcss

                                                                                                      You can download it from GitHub.

                                                                                                      Support

                                                                                                      For full documentation, visit tailwindcss.com.
                                                                                                      Find more information at:
                                                                                                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                                      Find more libraries
                                                                                                      Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                                      Save this library and start creating your kit
                                                                                                      Install
                                                                                                    • npm

                                                                                                      npm i tailwindcss

                                                                                                    • CLONE
                                                                                                    • HTTPS

                                                                                                      https://github.com/tailwindlabs/tailwindcss.git

                                                                                                    • CLI

                                                                                                      gh repo clone tailwindlabs/tailwindcss

                                                                                                    • sshUrl

                                                                                                      git@github.com:tailwindlabs/tailwindcss.git

                                                                                                    • Share this Page

                                                                                                      share link

                                                                                                      Consider Popular Theme Libraries

                                                                                                      bootstrap

                                                                                                      by twbs

                                                                                                      tailwindcss

                                                                                                      by tailwindlabs

                                                                                                      Semantic-UI

                                                                                                      by Semantic-Org

                                                                                                      bulma

                                                                                                      by jgthms

                                                                                                      materialize

                                                                                                      by Dogfalo

                                                                                                      Try Top Libraries by tailwindlabs

                                                                                                      headlessui

                                                                                                      by tailwindlabsTypeScript

                                                                                                      heroicons

                                                                                                      by tailwindlabsJavaScript

                                                                                                      tailwindcss-typography

                                                                                                      by tailwindlabsJavaScript

                                                                                                      tailwindcss-forms

                                                                                                      by tailwindlabsHTML

                                                                                                      prettier-plugin-tailwindcss

                                                                                                      by tailwindlabsJavaScript

                                                                                                      Compare Theme Libraries with Highest Support

                                                                                                      bootstrap

                                                                                                      by twbs

                                                                                                      Semantic-UI

                                                                                                      by Semantic-Org

                                                                                                      materialize

                                                                                                      by Dogfalo

                                                                                                      tailwindcss

                                                                                                      by tailwindlabs

                                                                                                      bulma

                                                                                                      by jgthms

                                                                                                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                                      Find more libraries
                                                                                                      Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                                      Save this library and start creating your kit