Upgrade tailwind css version in existing react/tailwind css app - reactjs

I made react app with Tailwind CSS version 2, now they have new version 3.0.
The version i have in my app needs craco to run, and i saw in the new documentation of installing Tailwind CSS with react app that the craco step doesn't exist anymore.
So how can I upgrade to version 3?
Thank you in advance!!

Try it like this:
npm uninstall craco
Follow the upgrade process Tailwind CSS project from v2 to V3 precisely.
Apply the required changes

Related

CRA 5 upgraded to Webpack 5. How does it help using Webpack Module Federation with CRA without ejecting?

Module Federation requires Webpack 5.
The new Create React App (CRA) v5 released last December was upgraded to Webpack 5.
How does it help using Webpack Module Federation with CRA without ejecting?
Any guide on how to do it in a clear way?
this is has been done already .
You can find the full example in module-federation-examples repo
https://github.com/module-federation/module-federation-examples/tree/master/cra

Installing an older version of Storybook

I am having an issue with Storybook 6.3 since it uses Webpack 5 and I am installing it on a clean create-react-app which uses Webpack 4.41.8.
I tried to update react webpack and all and still no luck. The problem started after I tried to add sass support for my storybook project, and went into dependency hell.
I just want to install an older version of Storybook like 5.3, how do I do that? Since Storybook uses npx sb init?
So in the end I found this to be the answer to all my problems (having latest Storybook and working sass support) that has been using the standard webpack-loaders as shown in the official Storybook docs, do not forget to import them and the entry .scss file in the root/.storybook/preview.js file e.g. import "!style-loader!css-loader!sass-loader!../stories/assets/main.scss"
You could downgrade storybook.
This is the official manual
If you'd like to downgrade to a stable version, manually edit the
package version numbers in your package.json and re-install.

migrating the version of material-ui from v4 to v5, found problem with emotion

I had migrate my version of material-ui v4 to v5.0.0-alpha.32 and notice that have some new StyleEngineProvider in order to run the old engine (jss) in the new version. But whe i run yarn build, it generated an empty styled on the header:
Can anyone help me with this issue?
I noticed that i upgrated only the #material-ui/core and forgot to upgrade the subpackages like #material-ui/styled and #material-ui/icons

Integrating Bulma Sass with Preact

currently I am playing around with Preact's default project and I want to integrate with Bulma Sass framework to build an UI.
I have searched but have not found a correct way in my case. I don't want to use Typescript or Bulma Components for Preact. Just want to use Bulma on HTML level.
Any suggestions or documentation on this ?
Okay, I have solved it as :
npm install --save-dev node-sass sass-loader#7.3.1
npm install bulma
By the help of these documentations : Using CSS preprocessors & Bulma CSS with React
Note : sass-loader#8.0.0 has compatibility issue with Preact

How to upgrade a React project built with create-react-app to the next create-react-app version?

I have a React project built with create-react-app 1.5. I would like to get the features of create-react-app 2.0 for my React project.
Specifically I would like to use this: https://github.com/facebook/create-react-app/pull/3909
Basically, to upgrade a create-react-app project, all you need to do is update the react-scripts module to the latest version and update your app to be compatible with any breaking changes in react-scripts.
Run yarn upgrade --latest react-scripts, rebuild your app, and everything should more-or-less work, barring any breaking changes.

Resources