From 8b2c4a38a461ff5ecc95972291bc711e2c5dec9a Mon Sep 17 00:00:00 2001 From: 简律纯 Date: Fri, 28 Apr 2023 01:47:57 +0800 Subject: --- examples/with-tailwind/packages/ui/package.json | 32 ++++++++++++++++++++++ .../with-tailwind/packages/ui/postcss.config.js | 9 ++++++ examples/with-tailwind/packages/ui/src/Button.tsx | 16 +++++++++++ examples/with-tailwind/packages/ui/src/Card.tsx | 27 ++++++++++++++++++ examples/with-tailwind/packages/ui/src/index.tsx | 6 ++++ examples/with-tailwind/packages/ui/src/styles.css | 3 ++ .../with-tailwind/packages/ui/tailwind.config.js | 7 +++++ examples/with-tailwind/packages/ui/tsconfig.json | 5 ++++ examples/with-tailwind/packages/ui/tsup.config.ts | 13 +++++++++ 9 files changed, 118 insertions(+) create mode 100644 examples/with-tailwind/packages/ui/package.json create mode 100644 examples/with-tailwind/packages/ui/postcss.config.js create mode 100644 examples/with-tailwind/packages/ui/src/Button.tsx create mode 100644 examples/with-tailwind/packages/ui/src/Card.tsx create mode 100644 examples/with-tailwind/packages/ui/src/index.tsx create mode 100644 examples/with-tailwind/packages/ui/src/styles.css create mode 100644 examples/with-tailwind/packages/ui/tailwind.config.js create mode 100644 examples/with-tailwind/packages/ui/tsconfig.json create mode 100644 examples/with-tailwind/packages/ui/tsup.config.ts (limited to 'examples/with-tailwind/packages/ui') diff --git a/examples/with-tailwind/packages/ui/package.json b/examples/with-tailwind/packages/ui/package.json new file mode 100644 index 0000000..be2c395 --- /dev/null +++ b/examples/with-tailwind/packages/ui/package.json @@ -0,0 +1,32 @@ +{ + "name": "ui", + "version": "0.0.0", + "sideEffects": [ + "**/*.css" + ], + "types": "./dist/index.d.ts", + "exports": { + ".": "./dist", + "./styles.css": "./dist/index.css" + }, + "license": "MIT", + "scripts": { + "build": "tsup", + "dev": "tsup --watch", + "check-types": "tsc --noEmit" + }, + "peerDependencies": { + "react": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.26", + "eslint": "^7.32.0", + "eslint-config-custom": "workspace:*", + "postcss": "^8.4.20", + "react": "^18.2.0", + "tailwind-config": "workspace:*", + "tsconfig": "workspace:*", + "tsup": "^6.1.3", + "typescript": "^4.9.4" + } +} diff --git a/examples/with-tailwind/packages/ui/postcss.config.js b/examples/with-tailwind/packages/ui/postcss.config.js new file mode 100644 index 0000000..07aa434 --- /dev/null +++ b/examples/with-tailwind/packages/ui/postcss.config.js @@ -0,0 +1,9 @@ +// If you want to use other PostCSS plugins, see the following: +// https://tailwindcss.com/docs/using-with-preprocessors + +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/with-tailwind/packages/ui/src/Button.tsx b/examples/with-tailwind/packages/ui/src/Button.tsx new file mode 100644 index 0000000..495d02a --- /dev/null +++ b/examples/with-tailwind/packages/ui/src/Button.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; + +export const Button = () => { + return ( +
+ +
+ Read the docs + + → + +
+ +
+ ); +}; diff --git a/examples/with-tailwind/packages/ui/src/Card.tsx b/examples/with-tailwind/packages/ui/src/Card.tsx new file mode 100644 index 0000000..6083de2 --- /dev/null +++ b/examples/with-tailwind/packages/ui/src/Card.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; + +export const Card = ({ + title, + cta, + href, +}: { + title: string; + cta: string; + href: string; +}) => { + return ( + +
+

{title}

+
+ {cta} → +
+
+ + ); +}; diff --git a/examples/with-tailwind/packages/ui/src/index.tsx b/examples/with-tailwind/packages/ui/src/index.tsx new file mode 100644 index 0000000..8af7073 --- /dev/null +++ b/examples/with-tailwind/packages/ui/src/index.tsx @@ -0,0 +1,6 @@ +// styles +import "./styles.css"; + +// components +export * from "./Button"; +export * from "./Card"; diff --git a/examples/with-tailwind/packages/ui/src/styles.css b/examples/with-tailwind/packages/ui/src/styles.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/examples/with-tailwind/packages/ui/src/styles.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/with-tailwind/packages/ui/tailwind.config.js b/examples/with-tailwind/packages/ui/tailwind.config.js new file mode 100644 index 0000000..23887e6 --- /dev/null +++ b/examples/with-tailwind/packages/ui/tailwind.config.js @@ -0,0 +1,7 @@ +const sharedConfig = require("tailwind-config/tailwind.config.js"); + +module.exports = { + // prefix ui lib classes to avoid conflicting with the app + prefix: "ui-", + presets: [sharedConfig], +}; diff --git a/examples/with-tailwind/packages/ui/tsconfig.json b/examples/with-tailwind/packages/ui/tsconfig.json new file mode 100644 index 0000000..cd6c94d --- /dev/null +++ b/examples/with-tailwind/packages/ui/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "tsconfig/react-library.json", + "include": ["."], + "exclude": ["dist", "build", "node_modules"] +} diff --git a/examples/with-tailwind/packages/ui/tsup.config.ts b/examples/with-tailwind/packages/ui/tsup.config.ts new file mode 100644 index 0000000..7b2189a --- /dev/null +++ b/examples/with-tailwind/packages/ui/tsup.config.ts @@ -0,0 +1,13 @@ +import { defineConfig, Options } from "tsup"; + +export default defineConfig((options: Options) => ({ + treeshake: true, + splitting: true, + entry: ["src/**/*.tsx"], + format: ["esm"], + dts: true, + minify: true, + clean: true, + external: ["react"], + ...options, +})); -- cgit v1.2.3-70-g09d2