The function designed to create in-line TailwindCSS classNames may work inconsistently in React and NextJS environments

Currently, I am utilizing TailwindCSS to style a web application. One frustrating aspect is that when attempting to add before: and after: pseudo-elements, it must be done individually.

For instance, take the navigation drop-down button styling:

<span className={'block relative border-2 w-full h-3 content-["test"]' + tagProps('before', ['block', 'absolute', 'top-2', 'border-2', 'w-full', 'h-0', 'content-[""]']) + tagProps('after', ['block', 'absolute', 'bottom-2', 'border-2', 'w-full', 'h-0', 'content-[""]'])}></span>

Along with this function:

const tagProps = (tag, prop) => {
let x = ' ';
for(const property of prop)
{
    x = x.concat(tag.concat(':').concat((property).concat(' ')));
}
return(x);

Mysteriously, the styles appear to apply randomly. Closing the browser, VSCode, then reopening them yields a 25% chance of successful style application. The reason for using a function here is due to TailwindCSS not allowing custom properties inside brackets for pseudo-elements.

If each pseudo-element were explicitly written out, the line of code would stretch extensively:

<span className='block relative border-2 w-full h-3 content-["test"] before:block before:absolute before:top-2 before:border-2 before:w-full before:h-0 before:content-[""] after:block after:absolute after:top-2 after:border-2 after:w-full after:h-0 after:content-[""]'></span>

This approach seems unreasonable. Additionally, I am unable to format the JSX statement in multiple lines when utilizing the class name generation function.

The question arises - why is this library praised highly? How does it differ from using CSS modules in nextjs?

Your feedback and suggestions on how to tackle this dilemma are greatly appreciated.

Answer №1

Dynamic class names may not be recognized by Tailwind CSS

To learn more about handling dynamic class names, visit this link

If you encounter this issue, consider using safe-listing to create class names

For information on safe-listing classes, check out this resource

Credit to @stickyuser for the tip

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

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

React hooks allow components to function properly even if the setState function is not explicitly called

Check out my React hooks code below: function State(){ var [msg,set_msg]=React.useState("hello") //not rendered, just to force render var [data,set_data]=React.useState({version:1}) function onClick(){ set_msg(x=>x+'x') //just to force ...

The .env file is functioning properly for the current keys, but any new ones I include remain undefined

Recently, I took over a Vue application that utilizes axios. Within the dataService.js file, it retrieves URLs from a project's .env file using process.env.FOO_BAR for GET requests. The pre-existing key-value pairs such as VUE_APP_DATA_URL function p ...

Inverting Arrays Recursively with JavaScript

Currently, we are delving into functional JavaScript in my programming course with a particular assignment. However, I seem to be struggling to make the code work as intended. I would greatly appreciate any advice on how to improve this piece of code. Ever ...

Transform the value of Material-UI DatePicker to seconds

I am trying to figure out how to convert the value from a React Material-Ui datepicker, which currently looks like this: 2021-05-26T01:30, into seconds. Any suggestions on how I can achieve this? PS: My goal is to create a schedule SMS module. Therefore, ...

Discovering the method for accessing a variable within jQuery from a regular JavaScript function

As someone new to jQuery, I am currently facing a challenge with accessing a variable defined inside a jQuery block from a regular function. Despite my attempts, I have been unsuccessful in accessing it. Can anyone guide me on how to do this? <script l ...

RSS feed showing null xml data with jQuery

Working on coding a straightforward RSS feed utilizing jquery and pulling data from Wired. Everything appears to be functioning correctly, except for one issue - after the description, an unknown value of NaN is appearing in the result. It seems to be comi ...

How come lazy loading isn't functioning in my React project?

Check out my project: link. This project includes routers and lazy-loaded components for each page. Here's a brief example of a router component: export const RoutersComponent = () => { return ( <HashRouter basename={'/'}> ...

How can I retrieve the class of the parent element by referencing the child id in jQuery?

I want to trigger an alert on click from the child id <th id="first"> to the table(parent) class. alert($(this).parent('tr').attr('class')); This code helped me to get the class of the <tr>. However, when I try to get the ...

Exploring the process of adding arrays to highcharts using jQuery

All my coding work has been carried out on FIDDLE I have carefully monitored all the arrays: MARKET[0], MARKET[1], MARKET[2], MARKET[3], MARKET[4], MARKET[5], MARKET[6], MARKET[7]. They display correctly in alerts. However, when I attempted to incorporate ...

Issue with the iteration process while utilizing Async.waterfall in a for-loop

This snippet may seem simple, but it represents a real issue in my current code base. When attempting to log the index of a for-loop within an async.waterfall function, I am encountering a peculiar situation where the index value is 2 instead of expected ...

Learn the technique of storing a sequence of functions within a variable using jQuery

For instance, I am looking to assign a sequential process to multiple variables and utilize them in various scenarios. var disable_btn = true; var button_me = $('#contents.getsamplekit .sample-form .form #submit-btn-freeSample-me'); var button_d ...

Leverage jQuery to organize and categorize JSON information received through an Ajax call

I have retrieved the following array from a MySQL database using PDO: [{ "tbl":"1", "orid":"915", "date":"2021-12-30 12:46:48", "flag":0 }, { "tbl":"2", "orid":"914", "date":"2021-12-30 12:46:21", "flag ...

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

Moment.js generated an error due to an unhandled promise rejection warning

I'm trying to determine if my current timestamp is equal or greater than a certain value, but I keep encountering errors. Here's my code with the error: {...} exports.validaforgotpass = async (req, res) => { {...} const results = aw ...

Styling Options for Material-UI Tables: Enhancing the Look of Your Table Components

I am working with 'material-ui' and attempting to change the color of a table element based on its value. In the code snippet below, I have tried to make the background color go red if the cell value is "Out of Zone". However, even though the tab ...

`Sending styles from a parent component to a child component: A step-by-step guide`

How can I pass a style object from a parent component to a child component? ParentComponent.js: const styles = theme => ({ field: { flexGrow: 1, position: 'relative', zIndex: 1, }, }); class ParentComponent extends React.Com ...

How can you position a table above a div in HTML and jQuery without using absolute positioning?

I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...

Executing actions on events in a Basic jQuery sliderLearn how to handle events and execute

I utilized the slider from the bjqs plugin at after reviewing the documentation, I noticed it only offers options and lacks events/functions. I am referring to events/functions like onSlideChange and onSlideDisplay. While other plugins such as bxslid ...

I'm struggling to determine the correct path to use in the background-image: url(); CSS property to display a specific image within a Vue.js project

Currently, I am working on a Vue.js project and this is the structure of my file tree (showing only relevant folders and files): root src assets image.jpg components header.vue index.html Within the header.v ...