What is the significance of using single quotation marks to enclose the 'raw' key in Tailwind?

While reviewing the Tailwind documentation on custom media queries, I came across an interesting option to create a fully custom breakpoint using the 'raw' key.

After adding this to my configuration file, I noticed that when I saved the file, Prettier automatically removed the single quotation marks (' ') from the raw key. This meant that ('raw') became (raw).

This made me wonder if it is okay for the raw key to not be enclosed in single quotation marks, or if it should be exactly as ('raw').

If anyone could provide an explanation for this, I would greatly appreciate it.

I tried looking through the Tailwind docs for clarification but couldn't find a satisfactory answer.

cssnext.jstailwind-csstailwind-ui

Answer №1

'raw' and raw are considered the same when used as an object key in JavaScript, so feel free to use either raw.

In JavaScript, object keys do not require quotation marks in object initialization if:

  • The key consists only of numbers.
  • The key starts with a letter and contains only letters, numbers, and underscores.

This is a feature of JavaScript syntax rather than Tailwind CSS, which is why it may not have been explicitly mentioned in their documentation.

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

Transitioning images while hovering over a different element

Need some inspiration for a school project? I'm stuck on how to create a smooth image fade effect in CSS when hovering over another element (like an anchor link) on the same page. I've been attempting to use the :target and not(:target) selector ...

htmlcss

In what way are these fonts being displayed through the utilization of a .js file?

Why are people opting for unique fonts on their browsers using .js files instead of graphics? For example, like typekit? ...

javascripthtmlcssfonts

Adjusting the height of a div inside a Material-UI Grid using Styled Components

When the mouse hovers over the two cells highlighted in pink, they turn pink. Is there a way to make the entire grid fill with pink when hovered over, both width and height at 100%? Check out the sandbox here ...

cssmaterial-uistyled-components

Error: Next.js is throwing a SyntaxError due to encountering an unexpected token 'export'

I encountered an issue when trying to render the following code: SyntaxError: Unexpected token 'export' (project path)/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js Everything seems to work as expected initially, but then ...

javascriptnode.jsreactjsnext.js

Issue with popup display in React Big Calendar

I'm currently working on a calendar project using React-Big-Calendar, but I've run into an issue with the popup feature not functioning properly. <div className={styles.calendarContainer} style={{ height: "700px" }}> <C ...

javascriptreactjsnext.jsreact-big-calendar

Differences between JavaScript's window.onload and body.onload functionsWhen

My inquiry is similar yet slightly distinct from the one queried here: window.onload vs <body onload=""/> The comparison in that prior query was between utilizing window.onload and inline js. My question pertains to the disparity between ...

javascripthtmlcss

What are some ways to prompt electron to refresh its rendering with updated CSS?

I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Spe ...

cssnode.jselectronbrowser-cache

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

htmlcssiframeresponsive-design

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...

javascriptreactjstypescriptnext.jserror-handling

Custom Pug design without any CSS files added

I am having trouble with my .pug template in my express project as it is not including its stylesheets. I have referred to the pug documentation but still can't figure out the issue. Any help would be appreciated! FILE TREE: views `-- index.pug `-- ...

cssexpresspug

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...

javascriptjqueryhtmlcsssvg

Reduce the size of log messages in cypress

I am looking to shorten the cypress messages to a more concise string, for instance: Cypress log Transform to: -assert expected #buy-price-field to have value 17,169.00. Is there a way to achieve this? I have searched through the documentation but hav ...

javascripttypescriptnext.jsmaterial-uicypress

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?

Even though I used p:nth-child(1){color: white;} in my CSS style tag, it did not produce the expected result. body { background-color: #162b85; } button, p:nth-child(1) { color: white; } <p class="center">Register your account</p&g ...

htmlcss

after executing the command npx create-next-app -e with-tailwindcss my-project, only a gitignore and a readme file are generated

I followed a tutorial on YouTube to create a blog app, using the command npx create-next-app -e with-tailwindcss my-project. However, when I ran it, only a gitignore file and a readme file were created. What am I doing wrong? I thought that all the boiler ...

npmnext.jsyarnpkgnpx

What are some techniques for ensuring a CSS div remains stable and intact when adjusting the browser size?

Is there a way to prevent the entire website from resizing when you minimize or maximize your browser? I want the website size to adjust in proportion to your resize without reorganizing everything. How can this be achieved while maintaining the site lengt ...

javascriptcss

Choosing pseudo-elements with CSS styling rules

I have been utilizing the Brave browser to block online ads. However, certain websites have found a way to insert ads into their HTML on the server-side, bypassing my ad-blocking efforts in Brave. Currently, Brave only offers the ability to block elements ...

csscss-selectorspseudo-elementadblock

Animations not working for Link component in nextjs with framer-motion and styled-components

While working on a framer-motion styled-component link using styled(motion.a), I've encountered an issue where the animation does not trigger if the link is a child of a nextjs Link component. The documentation for nextjs Link states: If the child ...

next.jsstyled-componentsframer-motion

Duplicate user scrolling input within a specified div container

I am attempting to recreate a horizontal scrolling effect on a div element that mirrors the input scroll. When the user scrolls along the input, I want the div element to scroll in sync. The issue I am encountering is specific to Chrome, where the input b ...

javascripthtmlcssgoogle-chromefirefox

After following the official guide, I successfully installed Tailwind CSS. However, I am facing issues with utilizing the `bg-black` className for styling the background,

Following the installation guide for Tailwind CSS, I ran the command npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p. Despite this, the background className (bg-black) is not working as expected. Here are the file paths: Directory ...

javascripthtmlcsstailwind-css

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...

csstwitter-bootstrapbootstrap-4