How to setup Express JS with Tailwind CSS and React JS

1. Create a new Express.js application: You can create a new Express.js application using the command npx express-generator myapp (replace myapp with the name of your application). This will create a new directory with the basic structure of an Express.js application.
   
2. Install the required dependencies: Open the terminal and navigate to your application directory. Then, install the required dependencies using the command npm install tailwindcss react react-dom.
   
3. Configure Tailwind CSS: Create a new file named tailwind.config.js in the root directory of your application. Copy the following code into the file:

module.exports = {
    mode: "jit",
    purge: ["./views/**/*.ejs"],
    darkMode: false,
    theme: {},
    variants: {},
    plugins: []
}

4. Create the React.js app: In the root directory of your application, create a new directory named client. Then, navigate to the client directory and create a new React.js app using the command npx create-react-app ..

5. Configure the Express.js app to serve the React.js app: Open the app.js file in the root directory of your application and add the following code at the end of the file:

app.use(express.static(path.join(__dirname, "client/build")));

app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "client/build", "index.html"));
});

6. Build the Tailwind CSS: In the root directory of your application, create a new file named postcss.config.js. Copy the following code into the file:

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

Then, open the package.json file in the root directory of your application and add the following code to the scripts section:

"build-css": "postcss public/css/main.css -o public/css/main.css",

7. Run the application: Start your application using the command npm start.

That’s it! Your Express.js application with Tailwind CSS and React.js is now set up and running. You can modify the configuration to suit your needs and start building your application.

Happy Coding 🫶