opdavies/rebuilding-bristol-js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wrap custom CSS within a layer directive

Browse source
This commit is contained in:
Oliver Davies 2020-09-27 18:12:11 +01:00
parent 2c1385d608
commit 67a49ecb93
1 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/assets/css/tailwind.css
View file

@ -1,28 +1,28 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities;
.btn { @layer components {
.btn {
@apply px-4 py-3 inline-block text-lg rounded-lg @apply px-4 py-3 inline-block text-lg rounded-lg
} }
.btn-blue { .btn-blue {
@apply bg-blue-500 border border-blue-600 text-white; @apply bg-blue-500 border border-blue-600 text-white;
@apply transition-colors ease-in-out duration-300; @apply transition-colors ease-in-out duration-300;
@apply hover:bg-blue-550 @apply hover:bg-blue-550
} }
.embed-responsive { .embed-responsive {
@apply block relative h-0 p-0 overflow-hidden; @apply block relative h-0 p-0 overflow-hidden;
padding-bottom: 56.25% padding-bottom: 56.25%
} }
.embed-responsive .embed-responsive-item, .embed-responsive .embed-responsive-item,
.embed-responsive iframe, .embed-responsive iframe,
.embed-responsive embed, .embed-responsive embed,
.embed-responsive object, .embed-responsive object,
.embed-responsive video { .embed-responsive video {
@apply absolute w-full h-full inset-0 border-0 @apply absolute w-full h-full inset-0 border-0
}
} }
@tailwind utilities;