feat: 添加 Tailwind CSS 支持,更新样式文件并移除不必要的文件
All checks were successful
/ test (push) Successful in 27s

This commit is contained in:
严浩
2024-11-22 17:59:32 +08:00
parent 7fdbea82d6
commit 0b40d065ca
9 changed files with 11 additions and 144 deletions

View File

@ -17,6 +17,10 @@
rel="stylesheet" rel="stylesheet"
href="/src/assets/main.css" href="/src/assets/main.css"
> >
<link
rel="stylesheet"
href="/src/assets/tailwind.css"
>
</head> </head>
<body> <body>

View File

@ -1,7 +1,3 @@
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */
body { body {
background-color: #f3f4f6; background-color: #f3f4f6;
color: #1f2937; color: #1f2937;
@ -14,7 +10,6 @@ body {
} }
} }
.attributes-group { .attributes-group {
padding: 1.5rem; padding: 1.5rem;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -28,4 +23,4 @@ body {
border-color: #374151; border-color: #374151;
background-color: #1f2937; background-color: #1f2937;
} }
} }

3
src/assets/tailwind.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

Before

Width:  |  Height:  |  Size: 496 B

View File

@ -5,7 +5,7 @@ import formKitConfig from '../formkit.config'
import App from './App.vue' import App from './App.vue'
// import '@unocss/reset/tailwind-compat.css' // import '@unocss/reset/tailwind-compat.css'
import '@unocss/reset/tailwind.css' // import '@unocss/reset/tailwind.css'
import 'virtual:uno.css' import 'virtual:uno.css'
const app = createApp(App) const app = createApp(App)

View File

@ -1,79 +0,0 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

View File

@ -2,8 +2,8 @@
export default { export default {
prefix: '', prefix: '',
content: [ content: [
"./index.html", // "./index.html",
"./src/**/*.vue", // "./src/**/*.vue",
"./formkit.config.theme.ts", "./formkit.config.theme.ts",
"./formkit.config.ts", "./formkit.config.ts",
], ],

View File

@ -4,55 +4,8 @@ import {
presetUno, presetUno,
transformerVariantGroup transformerVariantGroup
} from "unocss"; } from "unocss";
import { fkLibrary } from "./formkit.config.fkLibrary";
import { classes, globals } from "./formkit.config.theme";
const familyList = [
...new Set(Object.values(fkLibrary).map((lib) => lib.family)),
].filter((f) => f) as string[];
const typeList = [
...new Set(Object.values(fkLibrary).map((lib) => lib.type)),
].filter((f) => f) as string[];
console.debug(`familyList :>> `, familyList);
console.debug(`typeList :>> `, typeList);
const globalsR = [
...new Set(Object.values(globals).flatMap((v) => Object.keys(v))),
];
const classesR = [
...new Set(
Object.keys(classes)
.filter(
(k) =>
familyList.some((f) => k.includes(f)) ||
typeList.some((t) => k.includes(t))
)
.map((k) => classes[k])
.flatMap((v) => Object.keys(v))
.filter((className) => !className.includes("[]"))
.filter((className) => !className.includes("&::"))
),
];
// console.debug(`classesR :>> `, classesR);
export default defineConfig({ export default defineConfig({
content: {
filesystem: ["xx.ts"],
inline: [
"!border-none", // for: "range__inner"
classesR.join(" "),
globalsR.join(" "),
async () => {
return "";
},
],
pipeline: {
// include: [
// /xx.ts($|\?)/,
// ],
},
},
presets: [ presets: [
presetUno({ presetUno({
dark: "media", dark: "media",

8
xx.ts
View File

@ -1,8 +0,0 @@
const classss = [
'text-8882',
'formkit-disabled:opacity-40',
]
const globals: Record<string, Record<string, boolean>> = {
};