I encounter issues when trying to run "yarn start" following the integration of tailwindcss into my React project

I'm encountering an issue while integrating tailwindcss with postcss into my React Application (built using create-react-app).

To address this, I modified the scripts section in my package.json. Here is how my updated package.json appears:

{
  "name": "octopus-one",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "classnames": "^2.2.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "build:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css",
    "watch:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css -w",
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "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.7.6",
    "node-sass": "^4.14.1",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.4.6"
  }
}

After making these changes, I executed yarn start, but encountered the following output:

C:\Dev\octopus-one>yarn start
yarn run v1.21.1
$ npm run watch:css && react-scripts start

[email protected] watch:css C:\Dev\octopus-one
postcss src/styles/index.tailwind.css -o src/styles/index.css -w

_

The development server from the default create-react-app setup does not seem to be starting.

Despite no visible errors, it seems like npm run watch:css is constantly running without transitioning to react-scripts start. It appears there might be a mistake in my package.json, but I'm unsure of the necessary steps to rectify this.
My goal is to have react-scripts start initiate after the completion of npm run watch:css, so I can access the development server as usual (on localhost:3000).


As a newcomer to react and embarking on my first experience with tailwindcss within a React application, any assistance would be greatly appreciated. Thank you.

javascriptcssreactjsnpmtailwind-css

Answer №1

After much effort, I successfully managed to resolve this issue and now I will provide the answer to my own question above.

To execute multiple commands simultaneously, I utilized concurrently.

I followed these steps for installation:

yarn add concurrently -D


Subsequently, I modified the script section in my package.json as shown below:

"scripts": {
    "build:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css",
    "watch:css": "postcss src/styles/index.tailwind.css -o src/styles/index.css -w",
    "start": "concurrently \"npm run watch:css\" \"react-scripts start\"",
    "build": "concurrently  \"npm run build:css\" \"react-scripts build\"",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Finally, by executing npm run watch:css before react-scripts start, I was able to achieve my desired outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

javascriptangular

Step-by-step guide to integrating VS Code Debug with Foreman and running `nf start`

I have implemented this Heroku project as the foundation for a Node cluster environment. https://github.com/heroku-examples/node-workers-example However, as it utilizes foreman to initiate multiple processes upon start, I am facing difficulty in connecti ...

node.jsherokunpmforeman

Utilizing icons with vuetify's v-select component: a guide

In the code snippet below, I am using a v-select element to display a list of items filled from an array: <v-select v-model="myModel" :items="users" chips :readonly="!item.Active" label="Required users to f ...

javascriptvue.jsvuetify.js

Understanding JavaScript Prototypal Inheritance within ES5 Classes

I've been working on creating an XMLHttpRequest interceptor for Angular, encountering a roadblock when trying to intercept a third-party library that uses the XMLHttpRequest API. Although the solution below is functional, I've run into issues wit ...

javascriptangularxmlhttprequestecmascript-5

Changing Marker Colors in OpenLayers After Importing GPX Data: A Quick Guide

Check out this link for a code tutorial on importing GPX files and displaying map markers. I successfully implemented this code to show map markers. Is there a way to customize the color of the markers? Edit: var fill = new Fill({ color: 'rgba(2 ...

javascriptnode.jsexpressopenlayers

Creating objects that are a fraction of another's width

My goal is to create 3 responsive divs that fill the width of the window and adjust their width based on the window dimensions. However, I'm facing an issue with JavaScript where it seems to be miscalculating the window width, causing the objects to o ...

javascriptjqueryheightwidth

The positioning of the Kendo UI window is off-center

I have encountered a problem with the alignment of the Kendo Window. There is a simple fiddle available to demonstrate this issue. Despite having ample space for the Kendo window to show without triggering the browser's vertical scroll bar, the cente ...

javascriptkendo-uikendo-window

Unraveling the mysteries of this PHP-generated object

Need help with iterating over a JSON object generated by PHP code in response to a web service request. Looking for guidance on rendering sub-objects in a select list, especially those with value indexes. Can someone provide assistance on populating a sel ...

javascriptprototypejshtml-select

Does the history.push() function in React get executed asynchronously?

Utilizing the history object that is passed from a component to a reducer in React, I am conditionally routing to other pages while updating the state. I realize this may not be the optimal way to handle navigation, but surprisingly it is still working. ...

reactjsreact-router

Troubleshooting: Issue with Firebase callable function execution

In my index.js file, I have the following code snippet: const firebase = require("firebase"); const functions = require('firebase-functions'); // Firebase Setup const admin = require('firebase-admin'); const serviceAccount = require(&a ...

javascriptnode.jsfirebasegoogle-cloud-functions

Having trouble centering a Material UI card in React JS?

Struggling to center a card on my homepage using React. I've tried various CSS properties like justify, alignItems, alignContent, but nothing seems to work. Can't figure out how to get this card centered. Here's the code snippet: import Rea ...

reactjsmaterial-ui

Creating pagination functionality for a React Material table

Check out this Spring Boot endpoint that I use for retrieving items from the database: import React, { useEffect, useState } from "react"; // Additional imports export default function BusinessCustomersTable() { // Functionality and code impl ...

reactjstypescriptspring-bootmaterial-uireact-typescript

Can child components forward specific events to their parent component?

I created a basic component that triggers events whenever a button is clicked. InnerComponent.vue <template> <v-btn @click="emit('something-happened')">Click me</v-btn> </template> <script setup lang=" ...

javascripttypescriptvue.js

V5 Modal & jQuery: troubleshooting the spinner problem during loading of content

I'm working on displaying a spinner while loading modal content with the use of bootstrap v5 modal and jQuery. However, I encountered some issues in my example. The spinner does not display again after closing the modal; it only shows for the first t ...

javascriptjquerycsssassbootstrap-5

Randomizer File Name Maker

I was questioning the behavior of Multer Filename. If Multer stores files with random filenames, is there a possibility of two files having the same name in Multer? In other words, if I am storing files from a large number of users, could the filenames e ...

javascriptnode.jsnpmmulter

Neither req.body nor req.file contain any data

Hey everyone, I'm new to coding and currently working on creating a basic markdown blog. However, I'm facing an issue where req.body doesn't contain my markdown field and req.file is undefined when trying to upload an article. I'm unsur ...

javascriptnode.jsexpressmulterbody-parser

Tips for retrieving values from a field prior to form submission using mui and formik

I need to access the value of a field before submitting the form in order to verify it. I tried using the onChange event for this purpose, but the field remains empty and the value is not displayed. My stack includes Mui and Formik. This is the initial se ...

reactjsmaterial-uiformik

Leveraging Azure DevOps as a central repository for storing external npm and nuget packages

Struggling to find an efficient method for transferring numerous npm and nuget packages from Nexus 2 to an on-premise Azure DevOps server. ...

npmazure-devopsnugetrepository

How to customize the preview grid design in material-ui-dropzone

I am working on a book form page in my React app which includes an option to upload a cover photo. I opted for material-ui-dropzone from https://yuvaleros.github.io/material-ui-dropzone/ and it's working well, but I encountered an issue with the previ ...

javascriptreactjsmaterial-ui

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

The red div labeled as inline-block-1 in the jsFiddle takes up more space than needed for the text. Is there a way to eliminate the extra space, making it resemble the green inline-block-2 without removing the max-width and avoiding hard-coding width? Feel ...

jqueryhtmlcss