Wrap custom CSS within a layer directive

This commit is contained in:
Oliver Davies 2020-09-27 18:12:11 +01:00
parent 2c1385d608
commit 67a49ecb93

View file

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