Having trouble getting Tailwind CSS to interact with JavaScript variables for the backgroundImage class

In our NextJs app, we are utilizing Tailwind CSS and encountering difficulties when trying to use the backgroundImage property with a JavaScript variable. This is leading us to use an approach that goes against standard coding practices:

className={clsx("absolute top-0 right-0 left-0 bottom-0 bg-100% md:hidden")}
style={{ backgroundImage: `url(${customBgImageMobile})` }} //we prefer not to use style in this manner

We aim to avoid using the style attribute here and instead utilize the backgroundImage property from Tailwind CSS classes.

Your assistance on this matter would be greatly valued. Thank you!

javascripthtmlcssbackground-imagetailwind-css

Answer №1

When working with TailwindCSS, it is important to ensure that your class names are defined in a way that can be statically analyzed by the framework. This means that if you want to use a custom background image class, you need to define it properly:

const customBgImageMobileClass = `bg-[url(<your image link here>)]` // Make sure to include the actual TailwindCSS class name

Once you have created this class variable, you can then apply it to the className property.

Alternatively, you have the option of adding the URL directly to your tailwind.config.cjs file (https://tailwindcss.com/docs/background-image#customizing-your-theme):

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'image-mobile': "url('<your url>')",
      }
    }
  }
}

// You can now use this in your HTML as <div className="bg-image-mobile"></div>

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

Troubleshooting Problems with CSS Media Queries on Various 1280 screens

I'm facing an issue with creating a responsive layout using CSS media queries to adapt to different screen resolutions. Even though I've set up Media Queries for specific resolutions like: /*1280 x 1024*/ /*1280 x 960*/ /*1280 x 800*/ /*1280 x 7 ...

htmlcssresponsive-designmedia-queries

Delete an array with jQuery

I have been working with nested arrays and appending them to a div. When the button with id "name" is clicked, a movie title is stored in an array $titelBetyg, which is then added to another array called $films. Whenever a new $titelBetyg is created, I wan ...

javascripthtmlcss

The Angular ng-bind directive does not reflect changes in value updates

I am trying to dynamically update the content of a span element to reflect the current position of the element. The issue I am facing is that Angular does not update the value of the ng-bind attribute when I change the element's position. Here is my ...

javascriptjqueryhtmlangularjs

Having trouble organizing sequellize results according to fields in the joined table

I am currently working with three sequelize models as outlined below: tags: id tag_name product_tags: id tag_id --> Reference Key 'id' from tags product_id --> Reference Key 'id' from products tag_score products: id name My ob ...

javascriptmysqlnode.jssequelize.js

Is there a way to search across multiple fields using $elemMatch in Mongoose?

I have a data model that keeps track of different activities, including any problems or errors: activities?: { message?: string; data?: any; issue?: { errors?: AVError[]; dismissed?: { timestamp: string; message?: string; }; ...

javascripttypescriptmongoosenestjs

Analyzing the values provided as input (using setState)

Two event handlers manage passwords. The first, inputPassword, writes the input value to state. The second, inputPasswordRE, writes the input value and compares it to the value from inputPassword. Because setState works asynchronously, even if the same v ...

javascriptreactjsreact-hooks

Enhance Bootstrap 4 Navigation with Active State Styling

I'm having trouble with my jQuery code in Bootstrap 4. No matter what I try, I can't seem to add an "active" class to the nav-link that I click on. <script> $(document).ready(function () { $('.nav-link').click(function() { ...

javascriptjquerybootstrap-4

Creating components with custom backgrounds using inline styles in JavaScript with base64 encoding

I have a basic block with a base 64 background: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #footer { background: #00b2d6 url("data:image/png;base64,iVBORw0KGgoAAAANSUh ...

cssreactjsbase64

Adjustable slider height in WordPress

Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...

jqueryhtmlcsswordpress

Strategies for Implementing Multi-Step Password Form Validation

Currently, I am using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps as the foundation of my form with some adjustments. Validation is functioning correctly where empty fields disable the next button. However, when I attempt to add ...

javascripthtmlforms

Having trouble with JSON search not functioning as expected in Select2 4.0?

After numerous hours of effort, I finally managed to successfully load and display the json file, complete with the flag icons using Select2 4.0. The code ended up appearing deceptively simple. However, I am now facing an issue where the search function i ...

javascriptjqueryjsonjquery-select2

How can I align text to the center and set the text color at the same

Looking to place text in the center of a colored box? Although attempting to center the text, you may find that it remains towards the top rather than in the middle of the box. How can you shift the text down so it aligns with the middle of the backgroun ...

htmlcss

Obtaining a button from a dialog in Google Apps

It seems like I'm overlooking something really simple here, but I'm struggling to enable an interface button from a dialog box in Google Apps. When I try setting the disabled attribute to false in a this object under the "click" function, the bu ...

javascripthtmlajaxgoogle-apps-script

Cannot access pseudo elements in the Microsoft Edge browser

Is there a workaround for not being able to select or access the properties of :before & :after elements on Microsoft Edge's inspect element? .arrow_box { position: relative; background: #d43959; border: 4px solid #ac1f3c; width ...

htmlcssmicrosoft-edgepseudo-element

Icon Stacking - overlaying icons on top of one another

I recently implemented a Google map in my React Native app. However, I'm facing an issue where the icons on the map are overlapping each other instead of being positioned on either side. Despite trying various configurations, the result remains unchan ...

javascriptcssreactjsreact-native

What is the best way to target an HTML attribute using jQuery?

I have customized a Textbox by adding a special attribute: <asp.TextBox MyCustomAttribute="SomeValue"><asp.TextBox> Now, I want to retrieve this value from within an AJAX success function. Please note that I have excluded irrelevant attribut ...

javascriptjqueryhtmlasp.netajax

How to Retrieve Class Member Variables in JavaScript Prototype Functions During Callbacks

Here is my code snippet: function MyClass(udpSocket) { this.IPSocket = udpSocket; this.port; this.DestAddr; } MyClass.prototype.handleMessage = function(message) { var msg = JSON.parse(message); switch(msg.type) { case "Send": ...

javascriptscopethisjavascript-objectsdom-events

extracting json data in php from an api

Requesting an array of specifications from flipkart's API. Successfully fetching the response from the API: { "nextUrl": "https://affiliate-api.flipkart.net/1.0/affiliate/feeds/fnkygygma/category/reh/55ab6c2673a4773ffb8e4019.json?expiresAt=1452 ...

javascriptphphtmlangularjs

Why does JavaScript display a width of 800px for the Motorola Atrix MB860 4G? Shouldn't it actually be 540px?

When developing my Mobile Web App, I encountered an issue with getting the screen width of different devices to fit the views dynamically. I am puzzled by the fact that the Motorola Atrix MB860 is reporting a width of 800px despite having a resolution of ...

javascriptandroidweb-applicationsmotorolascreen-size

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the imple ...

htmlcssreactjscss-grid