使用 Tailwind 集成构建 Astro 组件库

Building Astro Component Library with Tailwind Integration

提问人:IvanS95 提问时间:11/18/2023 更新时间:11/18/2023 访问量:13

问:

我目前正在构建一个项目,它由一个基于 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

目录结构:enter image description here

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: [],
}

据我所知,这应该足以使集成正常工作并且样式在组件上可用,但是我可以应用我想要的所有类,并且组件仍然显示为基本标题

javascript npm package.json astro astrojs

评论


答: 暂无答案