Custom classes missing some styles

[amritk]

I noticed when you set some custom styles in input.css, they don't always seem to make it into tailwind.json

input.css

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;


@layer components {

  .floating-container {
    @apply absolute top-0 right-0 left-0 px-4 pt-12;
  }

  .floating-inner {
    @apply rounded bg-white px-8 py-6 dark:bg-black;
  }

  .nav-row {
    @apply bg-transparentBlack-300 font-300 flex-row items-center justify-start h-12 px-4;
  }
}

tailwind.css

.floating-container {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 3rem
}

.floating-inner {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}

@media (prefers-color-scheme: dark) {
  .floating-inner {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
  }
}

.nav-row {
  height: 3rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(0,0,0,0.3);
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: Epilogue300
}

tailwind.json

	"floating-container": {
		"style": {
			"position": "absolute",
			"top": 0,
			"right": 0,
			"left": 0,
			"paddingLeft": 16,
			"paddingRight": 16,
			"paddingTop": 48
		}
	},
	"floating-inner": {
		"style": {
			"--tw-bg-opacity": 1,
			"backgroundColor": "rgb(0 0 0 / var(--tw-bg-opacity))"
		},
		"media": "(prefers-color-scheme: dark)"
	},
	"nav-row": {
		"style": {
			"height": 48,
			"flexDirection": "row",
			"alignItems": "center",
			"justifyContent": "flex-start",
			"backgroundColor": "rgba(0,0,0,0.3)",
			"paddingLeft": 16,
			"paddingRight": 16,
			"fontFamily": "Epilogue300"
		}
	},

if you look under .floating-inner, the border radius and padding is missing. Not sure why that is, padding worked fine in .floating-container and .nav-row

[amritk]

Actually I removed dark: and it started working. I guess the dark mode modifiers seem to be messing something up