mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update component classes to Tailwind CSS way

Browse Source
This commit is contained in:
prototypa
2022-08-10 19:10:37 -04:00
parent 0226637a52
commit 65985c013f
4 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/astro/features/StepsFeatures.astro
View File

@ -22,7 +22,7 @@ const {} = Astro.props;
<div class="w-full md:w-1/3">
<button
type="button"
class="btn-sm bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
class="btn bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
>
Get started
</button>

40
src/layouts/Layout.astro
View File

@ -28,49 +28,11 @@ const { title = "", description = "", withHeader = true } = Astro.props;
</head>
<body
class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900"
class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900 font-ibm-plex-sans"
>
<Header />
<slot />
<Footer />
<style>
:root {
}
:global(body) {
font-family: "IBM Plex Sans", sans-serif;
}
:global(.btn, .btn-sm) {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
font-weight: 500;
line-height: 1.375;
transition-property: color, background-color, border-color, fill, stroke,
opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform,
filter, backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform,
filter, backdrop-filter, -webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.75rem 1.5rem;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
0 4px 6px -2px rgba(0, 0, 0, 0.02);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
</style>
<script is:inline>
function toggleDarkMode() {

36
src/styles/base.css
View File

@ -1,3 +1,39 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply inline-flex items-center justify-center rounded border border-transparent font-medium leading-snug transition py-3 px-6 shadow-lg;
/*
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
font-weight: 500;
line-height: 1.375;
transition-property: color, background-color, border-color, fill, stroke,
opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform,
filter, backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform,
filter, backdrop-filter, -webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.75rem 1.5rem;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
0 4px 6px -2px rgba(0, 0, 0, 0.02);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
*/
}
}

6
tailwind.config.js
View File

@ -2,7 +2,11 @@
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
theme: {
extend: {},
extend: {
fontFamily: {
'ibm-plex-sans': ['"IBM Plex Sans"', 'sans-serif'],
},
},
},
plugins: [],
darkMode: "class",