Problems are reported that don't exist in the original file. #1434
Description
What version of VS Code are you using?
v1.103.1 (user setup)
What version of Tailwind CSS IntelliSense are you using?
v0.14.26
What version of Tailwind CSS are you using?
v4.1.10
What package manager are you using?
npm
What operating system are you using?
Windows 11
Tailwind CSS Stylesheet (v4) or config file (v3)
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comforter&display=swap');
@import "tailwindcss";
@layer base {
* {
box-sizing: border-box;
}
html{
@apply h-full min-h-screen;
-webkit-tap-highlight-color: transparent;
}
body{
@apply bg-midnightblue bg-gradient-to-b from-[#23233b] via-[#1f1f26] via-60% to-[#0e0e13] bg-fixed bg-no-repeat bg-size-[100vw_100vh] text-white/80 font-sans text-sm lg:text-lg min-h-screen;
&.dev-debug:before{
@apply content-['BS'] sm:content-['SM'] md:content-['MD'] lg:content-['LG'] xl:content-['XL'] 2xl:content-['2XL'] bg-red-500 p-2 text-white fixed right-0;
}
}
main, main > *{
@apply flex flex-col min-h-screen;
}
h1, h2, h3{
@apply pointer-events-none;
}
h1 {
@apply font-script text-7xl/10 lg:text-9xl/12 inline-block text-white;
}
h2 {
@apply font-script text-6xl/10 lg:text-8xl/16 inline-block text-white;
}
h3 {
@apply font-sans inline-block text-white;
}
strong {
@apply text-white;
}
button{
@apply pointer-events-auto outline-none;
}
form{
@apply appearance-none;
label {
h2 {
@apply text-sm! lg:text-lg! m-0;
}
}
input {
@apply appearance-none outline-none text-white text-lg lg:text-xl py-2 border-b-2 border-b-yellow-50/10 block mt-2 w-full;
}
textarea {
@apply appearance-none outline-none text-white text-lg lg:text-xl py-2 border-b-2 border-b-yellow-50/10 overflow-hidden min-h-[15vh] resize-none mt-2 w-full;
}
select {
@apply appearance-none outline-none text-white text-lg lg:text-xl py-2 border-b-2 border-b-yellow-50/10 block mt-2 w-full;
}
option {
@apply appearance-none outline-none text-black;
}
.photo-details {
table {
@apply border-collapse w-full text-sm md:text-base;
}
td {
@apply py-2 border-b-1 border-b-yellow-50/10 align-top;
}
}
}
footer-element{
@apply flex-grow bg-yellow-50/5 mt-10 lg:mt-15 rounded-t-3xl ;
}
footer{
@apply text-white/50;
ul{
@apply space-x-2 sm:space-x-4 flex flex-wrap;
}
li{
@apply text-nowrap inline-block;
}
a {
@apply decoration-white/50 decoration-2 underline-offset-4 transition-colors duration-200;
&:hover{
@apply text-white decoration-white underline;
}
}
svg{
@apply fill-white/50!;
&:hover{
@apply fill-white!;
}
&:active{
@apply fill-white/20!;
}
}
}
}
@layer components {
.container {
@apply mx-auto px-8 grid grid-cols-12;
.back {
@apply col-span-full text-right sticky top-8 z-200 h-0 mb-0! pointer-events-none;
}
}
.container > div {
@apply space-y-4 relative;
}
.slideshow-container {
@apply fixed w-full h-svh transition-all duration-300 z-100;
.slideshow {
@apply relative h-svh w-full bg-midnightblue bg-gradient-to-b from-[#23233b] via-[#1f1f26] via-60% to-[#0e0e13] bg-fixed bg-no-repeat bg-size-[100vw_100vh] z-10;
}
.sidebar {
@apply transition-transform duration-300 w-full md:w-[450px] translate-x-full absolute top-0 right-0 h-full z-200 bg-darkgray;
}
&.sidebar-opened {
@apply md:pr-[450px];
.sidebar {
@apply translate-x-0;
}
}
}
.details {
span {
@apply mr-3;
}
}
.body {
h1 {
@apply text-6xl/14 lg:text-8xl/22 max-w-[calc(100%-8rem)];
}
h1 + h2{
@apply mt-8;
}
h2 {
@apply font-sans font-bold text-lg md:text-xl/8 lg:text-2xl/10 m-0;
}
p{
@apply max-w-5xl;
}
& > div:not(.grid){
@apply space-y-4 relative;
}
}
.box {
@apply p-8 -mx-8 last:pb-0;
h1 {
@apply md:absolute z-10 md:-rotate-3 md:-top-5 md:-left-0 lg:-top-10 pointer-events-none;
}
h2 {
@apply relative md:absolute z-10 md:-rotate-3 md:-top-5 lg:-top-10 md:-left-0 pointer-events-none;
}
p{
@apply max-w-2xl;
}
.update {
@apply relative bg-pink-700 text-white px-2 py-1 pr-3 ml-5 text-sm rounded-lg pointer-events-none;
&:before {
@apply w-0 h-0 border-solid border-transparent border-t-[.7rem] border-b-[.7rem] border-r-[.7rem] border-r-pink-700 content-[""] absolute top-1/2 -translate-y-1/2 -left-[0.6rem];
}
}
.album {
@apply relative;
&:after {
@apply z-100 pointer-events-none content-[attr(data-count-photos)] hidden md:inline-flex absolute top-[8px] right-[10px] lg:top-[8px] lg:right-[10px] text-sm lg:text-base text-white p-1 opacity-0 transition-opacity duration-200 items-center bg-no-repeat bg-right pr-7;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M360-400h400L622-580l-92%20120-62-80-108%20140Zm-40%20160q-33%200-56.5-23.5T240-320v-480q0-33%2023.5-56.5T320-880h480q33%200%2056.5%2023.5T880-800v480q0%2033-23.5%2056.5T800-240H320ZM160-80q-33%200-56.5-23.5T80-160v-560h80v560h560v80H160Z%22%2F%3E%3C%2Fsvg%3E");
}
&:hover:after {
@apply opacity-100;
}
&.new {
@apply relative;
&:before {
@apply content-['NEW'] absolute -left-7 top-2 z-10 bg-pink-600/60 text-white text-center -rotate-45 text-xs sm:text-sm lg:text-lg px-8 py-1 pointer-events-none;
}
}
}
}
.album-grid {
@apply mt-10 grid grid-cols-[repeat(2,1fr)] sm:grid-cols-[repeat(3,1fr)] md:grid-cols-[repeat(4,1fr)] lg:grid-cols-[repeat(5,1fr)] xl:grid-cols-[repeat(6,1fr)] gap-4 grid-flow-dense;
.album {
@apply relative;
&:after {
@apply z-100 pointer-events-none content-[attr(data-count-photos)] hidden md:inline-flex absolute top-[8px] right-[10px] lg:top-[8px] lg:right-[10px] text-sm lg:text-base text-white p-1 opacity-0 transition-opacity duration-200 items-center bg-no-repeat bg-right pr-7;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M360-400h400L622-580l-92%20120-62-80-108%20140Zm-40%20160q-33%200-56.5-23.5T240-320v-480q0-33%2023.5-56.5T320-880h480q33%200%2056.5%2023.5T880-800v480q0%2033-23.5%2056.5T800-240H320ZM160-80q-33%200-56.5-23.5T80-160v-560h80v560h560v80H160Z%22%2F%3E%3C%2Fsvg%3E");
}
&:hover:after {
@apply opacity-100;
}
&.new {
@apply relative;
&:before {
@apply content-['NEW'] absolute -left-7 top-2 z-10 bg-pink-600/60 text-white text-center -rotate-45 text-xs sm:text-sm lg:text-lg px-8 py-1 pointer-events-none;
}
}
}
.photo {
@apply flex items-center justify-center m-0;
img{
@apply object-cover w-full h-full rounded-lg cursor-pointer;
}
&.portrait{
@apply sm:row-span-2;
img {
@apply aspect-3/4;
}
}
&.landscape{
@apply col-span-2 sm:row-span-2;
img {
@apply aspect-4/3;
}
}
&.pano{
@apply col-span-2 md:col-span-3;
}
}
a {
@apply decoration-white/50 decoration-2 underline-offset-4 transition-colors duration-200;
&:hover{
@apply text-white decoration-white underline;
}
}
}
.toot {
.content {
a {
@apply decoration-white/50 decoration-2 underline-offset-4 transition-colors duration-200;
&:hover{
@apply text-white decoration-white underline;
}
}
.invisible {
@apply hidden;
}
}
}
.spinner{
@apply bg-no-repeat bg-center bg-size-[30px] md:bg-size-[40px];
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:butt;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25,100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C/style%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")
}
.socialmedia{
a {
@apply flex items-center whitespace-nowrap transition-all duration-200;
svg{
@apply fill-white/80 w-[20px] h-[20px] lg:w-[25px] lg:h-[25px] inline transition-colors;
}
span {
@apply ml-2;
}
&:hover {
@apply text-white underline;
svg{
@apply fill-white! scale-120;
}
}
&:active {
@apply text-white/20! no-underline duration-0;
svg{
@apply fill-white/20!;
}
}
}
}
.dots {
@apply flex items-center justify-center;
.dot1 { animation: dot-fade 1s infinite 0s; }
.dot2 { animation: dot-fade 1s infinite 0.2s; }
.dot3 { animation: dot-fade 1s infinite 0.4s; }
svg {
@apply ml-2 w-[25px] h-[8px] lg:w-[30px] lg:h-[10px] inline-block;
}
.dot {
@apply opacity-30 transition-opacity duration-200;
}
}
@keyframes dot-fade {
0%, 80%, 100% { opacity: 0.3; }
40% { opacity: 1; }
}
.message{
@apply rounded-lg mt-10 px-5 py-3 lg:max-w-lg xl:max-w-2xl text-white;
&.success{
@apply bg-green-500/20;
}
&.error{
@apply bg-red-500/40;
}
}
.affiliate {
@apply grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3 gap-5;
h3 {
@apply text-white;
}
ul {
@apply list-outside list-disc ml-5;
}
a {
@apply underline-offset-4 decoration-2 transition-colors duration-200 decoration-transparent hover:decoration-white hover:underline hover:text-white;
}
}
}
@theme {
--font-sans: "Lexend", sans-serif;
--font-script: "Comforter", serif;
--font-weight-medium: 400;
--font-weight-bold: 600;
--color-midnightblue: #23233b;
--color-darkgray: #1b1b1f;
}VS Code settings
{
"editor.multiCursorModifier": "ctrlCmd",
"editor.wordWrap": "on",
"diffEditor.ignoreTrimWhitespace": false,
"git.ignoreRebaseWarning": true,
"lit-plugin.customHtmlData": {},
"github.copilot.chat.pullRequestDescriptionGeneration.instructions": [],
"files.associations": {
"*.css": "tailwindcss"
}
}Describe your issue
Since momentarily I see these problems reported, that don't exist in the original file.
When I doubleclick the specified errors, a read-only version of style.css is opened that show different content than the original version.
Disabling/reenabling the extension or restarting VS Code didn't help so far.