I began to use tailwind a few days ago, i succeeded to install, make it builting fine, but when my page was ended, nothing was working after running content (the purge of unnecessary css). So i correct the file output, adding forgotten classes by tailwing purge process.
But my responsive windows were working before this production step : i mean for mobile under 640px, i had a background image (640 x 1024) and other properties, and for larger screens upper to 640 i had another background image (1024 x 640) with other properties for larger screens.
I do not find any classes sm or biggers in the output.css file and when i pass through 640px in browsers inspection nothing happens, the page is blocked on sm properties.
Below the main div for mobile screens :
<div class="conteneur_sm flex flex-col h-screen items-center sm:hidden bg-image_sm bg-no-repeat"> <!-- mobiles only -->
<div class="font-mashan text-shadow_sm text-center text-6xl mt-6 mb-6">打有 字汇</div>
<div class="custom-height-up flex">
And here the main div for bigger screens :
<div class="conteneur hidden sm:flex flex-col h-screen items-center bg-image bg-repeat"> <!-- larger_screens_only -->
<div class="font-mashan text-shadow_wide text-center text-7xl mt-8 mb-8">打有 字汇</div>
<div class="custom-height-down flex">
The first main div is visible only for mobile screens (by using : flex and sm:hidden ) and uses the bg-image_sm. The second main div is visible from 640px (by using hidden and sm:flex ). For a reason that i do not know, these properties weren't save in my output.css
and i wonder how write the classes sm and bigger in css syntax in my output.css production file.
edited on 13th august (asked a bot):
In Tailwindcss syntax, would you explain me what means "" in :
@media (min-width:640px) {.sm/:flex {display: flex;} .sm/:hidden {display: none;} }
Is this character available in CSS syntax ? It is hard for me to transcript the responsive classes sm, md, lg, xl and 2xl of Tailwind in a pure CSS syntax :-(
ChatGPT
Hello! In the context of Tailwind CSS, the "" character is used as an escape character that allows you to use special characters in class names that would otherwise be invalid in regular CSS syntax. This is especially useful when dealing with responsive utility classes like those based on breakpoints (e.g., sm, md, lg, xl, 2xl) in Tailwind.
Here's how it works:
In Tailwind CSS, you often use breakpoint-based classes like .sm:flex or .md:hidden to apply styles at specific screen sizes. However, if you were to write this in pure CSS, it would be invalid because the colon (:) and period (.) are not allowed characters in class names. CSS class names can only contain letters, numbers, hyphens, and underscores.
Tailwind solves this issue by allowing you to use the backslash () as an escape character. So, in the context of your example:
The : in .sm:flex and .sm:hidden is used to escape the colon character, allowing Tailwind to generate the correct class names for you. The resulting CSS classes would be .sm:flex and .sm:hidden.
In pure CSS, you would not need to use the escape character, as the colon is a valid character for class names. However, creating responsive styles similar to Tailwind's utility classes would require writing out media queries manually for each breakpoint.
For example, in pure CSS, you might write:
@media (min-width:640px) {.sm-flex {display: flex;} .sm-hidden {display: none;} }
/* And so on for other breakpoints */ It's worth mentioning that while using Tailwind CSS provides a lot of convenience for rapid development, replicating the exact same utility classes in pure CSS can be more verbose and time-consuming. This is one of the trade-offs to consider when choosing between a utility-first framework like Tailwind and traditional CSS approaches.
