Tailwind css 3.0.5 is not working with react. I have installed tailwind css as per the official installation guide of the tailwind css (https://tailwindcss.com/docs/guides/create-react-app).
The code which, I have written is below.
package.json
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.7"
}
}
src/index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/app.js
import "./index.css";
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
I think you need to update your create-react-app version, you're using version 4 which need something like Craco to let you override the PostCSS configuration natively
Try to update your create-react-app globally with this command
npm install -g create-react-app,
then try this step again https://tailwindcss.com/docs/guides/create-react-app
OR
Update your create-react-app only on current project
npm install react-scripts#latest
Just update your react-script from v4 to lastest 5 version by: npm install react-scripts#latest.
If you will stay with version 4 you have to use craco
That was helpful for me
Uninstall your create-react-app globally. Then do
npx create-react-app appname
After that follow the documentation for the framework create-react-app and you will be fine.
https://tailwindcss.com/docs/guides/create-react-app
Related
Here is my package.json:
{
"name": "new-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"buffer": "^6.0.3",
"dotenv": "^16.0.3",
"guardian-wallet": "^0.0.6-rc.30",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preinstall": "npx npm-force-resolutions"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-error-overlay": "^6.0.11"
},
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
My app.js :
import logo from './logo.svg';
import './App.css';
import GuardianWallet from "guardian-wallet";
I have tried many the solutions I came across nothing helped:
I have tried upgrade react-scripts to its latest version.
Tried npm install --save-dev react-error-overlay#6.0.9 --force.
Tried adding resolution.
Deleted node_modules and package.lock.json and then used npm cache clean --force and then
did npm install.
process is a Node.js global; process is not defined in a React application most likely means that you're trying to use an NPM package that was written for Node.js, not a browser environment.
Depending on your specific environment and needs, there are a few approaches you could take to fix it: You could replace the NPM package that you're using with one that's written for browsers, or submit a request or PR to add browser support to the NPM package you're using, or set up polyfills in your bundler (see, e.g., here).
Tailwind css v3.0.24 is not working in react app.I have followed all the steps given in the official tailwindcss website but still not working.I have updated my react-script version even after that it is not working.
Here is my code.
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
package.json
{
"name": "my-portfolio-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.js
import './App.css';
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
maybe you forget to import index.css to App.js
import './App.css';
import './index.css';
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
Your package.json does not show tailwindcss is installed as dev devDependencies remember to includes index.css in your App.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
I'm trying to deploy my react-app to netlify. But the tailwindCSS doesn't seem working.
I have no error message or anything, so have no clue which way to go. Deployment was successful. I was checking all the answers here and other forums, but nothing solved my problem.
Tried different builds, and pushing different settings, but just got a plain HTML page without styles.
My package.json
{
"name": "benji-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#headlessui/react": "^1.4.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-parallax-tilt": "^1.5.54",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7"
}
}
tailwind.config.js
module.exports = {
purge: [
'/src/components/About/About.js',
'/src/components/Contact/Contact.js',
'/src/components/Navbar/Navbar.js',
'/src/components/Projects/Projects.js',
'/src/components/Skills/Skills.js',
'/public/index.html'
],
darkMode: 'class',
theme: {
extend: {
backgroundImage: (theme) => ({
'code': "url('/src/components/About/coding-bg-dark.png')",
'lightcode': "url('/src/components/About/lightcode.png')",
})
},
},
variants: {
extend: {
backgroundImage: ['dark'],
},
},
plugins: [],
}
Netlify build settings:
Build command: craco build
Publish directory: public/
full github repo HERE
So after trying all day long. Somehow I made it up and running. I made multiple changes on netlify in the build process, and also changed craco.config.js and tailwind.config.js, until I successed and deployed.
What worked for me, and hopefully some of you will may find it useful is the tailwind.config.js
I changed the module.exports.purge to:
module.exports = {
purge: [
"./src/components/**/*.{js,jsx}",
"./public/index.html",
],
...
}
and on the Netlify build settings:
Publish Directory: build
I am unable to use react particles in my project.
Following the documentation, i installed react-particles,
and when it did not work, i installed react-tsparticles
but still it gives me same error:
Module not found: Can't resolve 'tsparticles'
Please Help me in this. Below is my dependency file.
{
"name": "portfolio-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^5.0.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-particles-js": "^3.5.3",
"react-scripts": "4.0.3",
"react-tsparticles": "^1.30.4",
"react-typed": "^1.2.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tslint": "^5.0.0"
}
}
When you install the npm i react-particles-js in your project. In the initial doc the develper mentioned the react-particles-js is dependant on "tsparticles" so you just install "npm i tsparticles".
npm i tsparticles
Nothing else and restart your server .I think this time its working fine.
Here is my Particle component.
import React from 'react'
import Particles from 'react-particles-js'
function Particless (){
return (
<Particles
params={{
particles: {
number: {
value: 200,
density: {
enable: true,
value_area: 1000,
}
},
},
}}
/>
)
}
export default Particless
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Uninstall "react-particles-js", because it's deprecated. Install "react-particles" instead.
npm install react-particles
In your Component:
import Particles from "react-particles";
try installing ts particles npm package
as this should fix the issue
here is what I did.
removed the node modules > removed the packagelock.json > npm i tsparticles
then it worked for me.
You have to must install npm package of ts particles because it depends on particles library.
npm i tsparticles (command for installing tsparticles)
After installing tsparticles you have to restart the server and the issue is resolved
upgrade npm package to latest version
$ yarn add react-particles-js#latest
# OR
$ npm i -S react-particles-js#latest
install dependency npm package
$ yarn add -D tsparticles#latest
# OR
$ npm i -D tsparticles#latest
refs
https://github.com/Wufe/react-particles-js/issues/191#issuecomment-953464323
In a new React project, I'm getting this error when trying to import a component from node_modules (subplayer as can be seen from my package.json). The error further suggests to
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets'
section of your Babel config to enable transformation. If you want to
leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to
the 'plugins' section to enable parsing.
So I created a babel.config.json in the same location as package.json with the following content
{
"presets": ["#babel/preset-react", "#babel/preset-env"],
"plugins": ["#babel/plugin-transform-react-jsx", "#babel/plugin-syntax-jsx"]
}
My package.json contains the following:
{
"name": "projectname",
"version": "0.1.0",
"main": "./build/index.js",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.6.3",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"subplayer": "file:tmp/subplayer-2.0.0.tgz",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
you may want to install the dependencies
npm i #babel/preset-react #babel/preset-env #babel/plugin-transform-react-jsx #babel/plugin-syntax-jsx -D
You need to install #babel/preset-react as mwebi said:
npm install --save-dev #babel/preset-react
Also, if you bootstrapped your react app using create-react-app script, it will ignore a babel config.
You must eject the app (not recommended) or create ground up yourself.