tailwindcss/tests/apply.test.css

.basic-example {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.class-order {
  padding: 2rem;
  padding-left: 0.75rem;
  padding-bottom: 1.75rem;
  padding-top: 1rem;
  padding-right: 0.25rem;
}
.with-additional-properties {
  font-weight: 500;
  text-align: right;
}
.variants {
  font-weight: 600;
}
.variants:hover {
  font-weight: 700;
}
.variants:focus {
  font-weight: 500;
}
@media (min-width: 1024px) {
  .variants {
    font-weight: 300;
  }
}
@media (min-width: 1280px) {
  .variants:focus {
    font-weight: 900;
  }
}
.only-variants:hover {
  font-weight: 700;
}
.only-variants:focus {
  font-weight: 500;
}
@media (min-width: 1024px) {
  .only-variants {
    font-weight: 300;
  }
}
@media (min-width: 1280px) {
  .only-variants:focus {
    font-weight: 900;
  }
}
.group:hover .apply-group-variant {
  text-align: center;
}
@media (min-width: 1024px) {
  .group:hover .apply-group-variant {
    text-align: left;
  }
}
.dark .apply-dark-variant {
  text-align: center;
}
.dark .apply-dark-variant:hover {
  text-align: right;
}
@media (min-width: 1024px) {
  .dark .apply-dark-variant {
    text-align: left;
  }
}
.apply-custom-utility {
  custom: stuff;
}
.apply-custom-utility:hover {
  custom: stuff;
}
@media (min-width: 1024px) {
  .apply-custom-utility {
    custom: stuff;
  }
}
@media (min-width: 1280px) {
  .apply-custom-utility:focus {
    custom: stuff;
  }
}
.multiple,
.selectors {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.multiple-variants:hover,
.selectors-variants:hover {
  text-align: center;
}
.multiple-variants:active,
.selectors-variants:active {
  text-align: right;
}
@media (min-width: 1024px) {
  .multiple-variants:focus,
  .selectors-variants:focus {
    text-align: left;
  }
}
.group:hover .multiple-group,
.group:hover .selectors-group {
  text-align: center;
}
@media (min-width: 1024px) {
  .group:hover .multiple-group,
  .group:hover .selectors-group {
    text-align: left;
  }
}
.complex-utilities {
  --tw-ordinal: ordinal;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.complex-utilities:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.complex-utilities:focus {
  --tw-numeric-fraction: diagonal-fractions;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.use-base-only-a {
  font-weight: 700;
}
.use-dependant-only-b {
  font-weight: 400;
}
.btn {
  border-radius: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 700;
}
.btn-blue {
  border-radius: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 700;
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-blue:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.recursive-apply-a {
  font-weight: 900;
}
@media (min-width: 640px) {
  .recursive-apply-a {
    font-weight: 100;
  }
}
.recursive-apply-b {
  font-weight: 900;
}
@media (min-width: 640px) {
  .recursive-apply-b {
    font-weight: 100;
  }
}
.recursive-apply-b {
  font-weight: 600;
}
@media (min-width: 768px) {
  .recursive-apply-b {
    font-weight: 200;
  }
}
.recursive-apply-c {
  font-weight: 900;
}
@media (min-width: 640px) {
  .recursive-apply-c {
    font-weight: 100;
  }
}
.recursive-apply-c {
  font-weight: 600;
}
@media (min-width: 768px) {
  .recursive-apply-c {
    font-weight: 200;
  }
}
.recursive-apply-c {
  font-weight: 700;
}
@media (min-width: 1024px) {
  .recursive-apply-c {
    font-weight: 300;
  }
}
.use-with-other-properties-base {
  color: green;
  font-weight: 700;
}
.use-with-other-properties-component {
  color: green;
  font-weight: 700;
}
.add-sibling-properties {
  padding: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.add-sibling-properties:hover {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 1024px) {
  .add-sibling-properties {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1280px) {
  .add-sibling-properties:focus {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}
.add-sibling-properties {
  padding-top: 3px;
  color: green;
  font-weight: 700;
}

h1 {
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 640px) {
  h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}
@media (min-width: 1024px) {
  h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
@media (min-width: 640px) {
  h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.important-modifier {
  border-radius: 0.375rem !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

.important-modifier-variant {
  padding-left: 1rem;
  padding-right: 1rem;
}

.important-modifier-variant:hover {
  border-radius: 0.375rem !important;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.foo {
  animation: spin 1s linear infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
.bar {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}