提问人:IvanS95 提问时间:11/18/2023 更新时间:11/18/2023 访问量:13
使用 Tailwind 集成构建 Astro 组件库
Building Astro Component Library with Tailwind Integration
问:
我目前正在构建一个项目,它由一个基于 Astro 的组件库组成,我也想使用 Tailwind 来设置组件的样式并导出它们以用于其他项目。 我按照这两个指南构建了 NPM 包并设置了 Tailwind 集成,但我似乎无法让样式实际出现在我的组件上,有什么想法/技巧吗?
https://docs.astro.build/en/reference/publish-to-npm/#integrations-library
https://docs.astro.build/en/guides/integrations-guide/tailwind/#configuration
Package.json
{
"name": "my-new-component-directory",
"description": "A new Astro component directory",
"version": "0.0.1",
"type": "module",
"exports": {
".": "./index.ts"
},
"files": [
"src",
"index.ts"
],
"keywords": [
"astro-component"
],
"scripts": {},
"devDependencies": {
"astro": "^3.0.0"
},
"peerDependencies": {
"astro": "^3.0.0"
},
"dependencies": {
"@astrojs/check": "^0.3.1",
"@astrojs/tailwind": "^5.0.2",
"tailwindcss": "^3.3.5",
"typescript": "^5.2.2"
}
}
Astro 配置
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
integrations: [tailwind()]
});
Tailwind 配置
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {},
},
plugins: [],
}
据我所知,这应该足以使集成正常工作并且样式在组件上可用,但是我可以应用我想要的所有类,并且组件仍然显示为基本标题
答: 暂无答案
评论