Wrap custom CSS within a layer directive
This commit is contained in:
parent
2c1385d608
commit
67a49ecb93
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue