tailwindcss | A utility-first CSS framework for rapid UI development | Theme library
kandi X-RAY | tailwindcss Summary
Support
Quality
Security
License
Reuse
- 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 .
tailwindcss Key Features
tailwindcss Examples and Code Snippets
Lines of Code : 81License : Strong Copyleft (CC BY-SA 4.0)
Copynpm 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
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')
// ])
npm uninstall tailwindcss postcss autoprefixer
npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
$ npm install tailwindcss
$ npm i -D autoprefixer postcss
$ npx tailwindcss init
$ npx tailwindcss@latest build ./src/styles.css -o ./dist/styles.css
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! ;-)
# Using NPM?
npm install -D tailwindcss
# Using yarn?
yarn add tailwindcss -D
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
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"
}
Trending Discussions on tailwindcss
Trending Discussions on tailwindcss
QUESTION
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.
Code:
ANSWER
Answered 2022-Apr-03 at 14:06Use flex-grow or grow instead of w-full in your input if you want it to grow to all available space.
QUESTION
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:58In 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'
QUESTION
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:25Maybe you can try add focus:outline-none direct in your class.
QUESTION
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:41In package.json you should activate watch mode on the start script like
"scripts": {
"start": "TAILWIND_MODE=watch craco start",
...
}
QUESTION
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:41By 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.
QUESTION
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:15Try 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.
QUESTION
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:38This 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.
QUESTION
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:03The 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.
QUESTION
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!
ANSWER
Answered 2021-Oct-04 at 04:17Maybe your problem is because you need a tailwindcss.config.js.
For this, simply type in the console:
yarn run tailwindcss init
QUESTION
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:57As 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.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install tailwindcss
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page
