Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch".

tailwind.css

module.exports = {
  content: ["./src/**/*.{js, jsx, ts, tsx}", "./templates/**/*.{html}"],
  important: '#root',
  theme: {
    extend: {},
  },
  plugins: [],
}

App.css

@tailwind components;
@tailwind utilities;

App.js

import "./App.css"
import { StyledEngineProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

// ...
<StyledEngineProvider injectFirst>
  <CssBaseline />
  <Button>Click me</Button>
</StyledEngineProvider>

Answer №1

If you want your App.css to work properly, all you need to do is make a simple adjustment to the code.

Replace the current code:

@tailwind components;

@tailwind utilities;

With this code:

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Don't worry about the rest of the code - it can remain the same. Just focus on changing the mentioned lines and you'll be good to go. This issue is commonly seen in tailwind v3.

I hope this solution resolves your problem!

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

Invoking a function within the directive's controller

How can I access and call the method defined within the directive controller externally? <div ng-controller="MyCtrl"> <map></map> <button ng-click="updateMap()">call updateMap()</button> </div> app.directive(&a ...

Is there a way to access the history of Vue routers?

I am looking for a way to determine if the Vue router has additional entries in its history that can be navigated back to. This information is crucial for deciding whether or not to execute the exit app function. The app should only navigate back to prev ...

Update the dropdown selection in a MUI TextField select box programmatically

I've been attempting to dynamically change the dropdown option, but it doesn't seem to be working properly. Even after updating the radius value, the label of the option remains unchanged. Has anyone experienced this issue and found a solution b ...

Having trouble with proper functionality of OnMouseEnter in React when used on multiple divs

I am struggling with a React issue related to onMouseEnter. My goal is to expand only one card at a time, but currently, when I hover over one card, all of them expand simultaneously. Can someone please offer some guidance on how to resolve this? export ...

Establishing a primary color for all text in Vuetify

How can I set a base color for all text in a Vue + Vuetify project? I attempted to change the theme's primary color in vuetify.ts: export default new Vuetify({ theme: { themes: { light: { primary: "#E53935", }, }, }, } ...

Exploring the Utilization of FormData and form.serialize within the Data Parameter of Ajax Jquery

My form includes a multiupload uploader for files, structured like this : <div class="col-md-4"> <div class="form-group"> <label class="control-label col-md-3">Location</label> <div class="col-md-9"> <?php ...

Is it possible to enable unknown keys for multiple schema objects simultaneously using Joi Validation?

I have a multitude of validator files each containing nearly a hundred schema objects. My goal is to validate unknown keys for all of them simultaneously. I've managed to figure out how to do it for a single object, as shown below. Is there a way to a ...

Using JavaScript to shift an image sideways upon clicking a hyperlink on the page

One of my clients has a unique request for an image to move across the page from left to right when a link is clicked. I'm not very experienced with javascript, so I would really appreciate any guidance on how to make this happen. Thank you in advanc ...

Unable to retrieve value from TextField component in material-ui

Parent Component export default class Parent extends Component { handleSubmit = (e) => { e.preventDefault(); console.log('1', e.target); // the result is like <form><div>...<input/></div></form> ...

What is the method to set up Material-UI Docs without the need to install material-ui library

Currently, the process to install and run material-ui docs locally involves two separate npm install commands - one within material-ui directory, and another within material-ui/docs directory. You may want to use the docs site as a starting point for your ...

Using the "unicode-range" property for numerical values

Having incorporated a custom font using @font-face, I am attempting to showcase text in two different languages on a webpage with distinct fonts utilizing the font-face at rule in CSS and employing the unicode-range property. While the text appears corre ...

Unexpected quirks in Canvg conversion: Strange behavior observed while utilizing a fill URL

I am attempting to use the canvg javascript library to convert an svg to canvas. Within the original svg, there is a rectangle with a fill attribute that references a svg pattern. However, when I convert the svg to canvas using canvg: canvg(document.getE ...

The ins and outs of function returns and callback mechanisms

I'm encountering an issue related to the order of my functions and I can't figure out the reason behind it. When I hover over the call for function_2 inside the first function, VSCode shows me the result as Promise<void>, and the console p ...

Validating Angular UI without requiring an input field (validating an expression)

Currently, I am utilizing ui-validate utilities available at https://github.com/angular-ui/ui-validate The issue I am facing involves validating an expression on a form without an input field. To illustrate, consider the following object: $scope.item = ...

Creating a split screen layout using Bootstrap

I've been working hard to create a split-screen layout using Bootstrap. After using CSS to achieve it, I realized that it's not responsive for mobile users. Therefore, I'm reworking it with Bootstrap but facing issues with resizing the image ...

React Native application experiences unexpected crashes upon launching on Android 11 devices with no error message provided

Here are my build.gradle settings and system information: I'm attempting to launch a React Native app on Android 11, but it keeps crashing without any error message. I've tried numerous solutions, including adjusting the build.gradle file: build ...

Choosing the perfect gradient shade for a progress bar canvas illustration: Tips and tricks

I am trying to customize the appearance of the usage bar in my Google Chrome extension by utilizing the features of the HTML5 canvas. Currently, the bar consists of a basic DIV element: <div id="idUsgBar"></div> accompanied by this CSS stylin ...

Dynamic Bootstrap User Authentication Form

Currently, I am in the process of constructing a login form for my web application and have opted to use Bootstrap for its styling. To ensure that the screen is responsive, I've integrated the following "Meta Tag" into the structure: <meta name="v ...

Are CSS3 animations limited to working only with Webkit?

Trying to create a CSS3 animation featuring a puzzle piece on my website. Below is the code I'm using. Strangely, the animation only seems to be working on Safari and Chrome. Any tips on how to make it compatible with Firefox and Opera? Appreciate you ...

How can the value attribute be obtained from the click class?

$(document).on('click','.edit', function(){ var appid = $(this).getAttribute('value'); I am trying to figure out how to save the value of the "value" attribute for an image with the edit class. Can anyone help me with thi ...