Drawbacks

As previously mentioned, strong CSS knowledge is required to make the most use out of Tailwind, unless you make heavy use out of community pre-styled assets. Further, in my experience, Tailwind is harder to initially set up than Bootstrap for a few reasons.

Firstly, you’ll want to use PostCSS or Sass to make the most use out of all Tailwind’s features. In Visual Studio Code, this can be done by installing the PostCSS Language Support extension and installing postcss-cli via npm. You will also likely want to install Tailwind CSS IntelliSense at the same time as it autocompletes Tailwind classes similar to how Emmet functions.

Next, you’ll need to follow the Tailwind installation instructions and set up a config file which tells Tailwind which files to scan for its classes, and finally run the build/watch command to auto-generate the necessary CSS.  It may sound complicated, but once you’ve done it the first time, you’ll be set.

The Virtual DOM

It is specialized in the creation of sophisticated user interfaces and just as its name suggests, React reacts to changes in the Virtual DOM (Document Object Model) in a way that boosts performance and load times.

Normally, you would use HTML to update the DOM, but when you need to dynamically alter content on the page without constantly reloading the page, you need something more. React uses a form of JavaScript called JSX to selectively update the exact components that need updating – without needing to alter the entire DOM. This optimises the user interaction process from a technical standpoint, reducing load times and boosting performance.

Components

React JS uses reusable and declarative components to break down complex UIs into their base components. These can then be freely reused across the entire application. Similarly to how Tailwind and Bootstrap essentially let you write CSS inside your HTML files, JSX allows you to write full HTML inside your JavaScript files. This, when properly managed, can result in incredibly cleanly organised file structures where different elements of your web-app become self-contained and easily manageable components. No more scrolling through thousands of lines of code to find that one thing you need to change.

Community and Plugins

Lastly, React is constantly being updated and has a plethora of plugins and extra resources such as React Router, which enables powerful page routing despite the single page nature of React applications. This means that you can have a single index.html file that is dynamically updated with whatever content you need to show according to your JS files. If you liked the sound of Bootstrap for CSS, there is also a React specific variant called Reactstrap to sink your teeth into. More of a mobile fan? React Native has you covered, allowing you to convert your web-centric code into a fully usable mobile application.