From 24b42d81b36c5c3e3196c1da455b021a9dc6e0eb Mon Sep 17 00:00:00 2001 From: Bruce Date: Wed, 19 Jun 2024 08:09:28 +0800 Subject: [PATCH] feat(tailwind): :sparkles: add tailwind config module --- README.md | 5 ++-- packages/prettier-config/package.json | 2 +- packages/tailwind/README.md | 31 +++++++++++++++++++++ packages/tailwind/package.json | 40 +++++++++++++++++++++++++++ packages/tailwind/tailwind.config.ts | 10 +++++++ packages/tailwind/tsconfig.json | 4 +++ pnpm-lock.yaml | 16 +++++++---- 7 files changed, 100 insertions(+), 8 deletions(-) create mode 100644 packages/tailwind/README.md create mode 100644 packages/tailwind/package.json create mode 100644 packages/tailwind/tailwind.config.ts create mode 100644 packages/tailwind/tsconfig.json diff --git a/README.md b/README.md index 133befc..a7ddafb 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ ![npm](https://img.shields.io/npm/v/@bit-ocean/eslint-config?logo=eslint&label=eslint-config) ![npm](https://img.shields.io/npm/v/@bit-ocean/prettier-config?logo=prettier&label=prettier-config) ![npm](https://img.shields.io/npm/v/@bit-ocean/renovate-config?logo=renovatebot&label=renovate-config) +![npm](https://img.shields.io/npm/v/@bit-ocean/tailwind?logo=tailwindcss&label=tailwind) ![npm](https://img.shields.io/npm/v/@bit-ocean/tsconfig?logo=typescript&label=tsconfig) ## Packages @@ -26,11 +27,11 @@ - [`hooks`](/packages/hooks/README.md): Universal hooks. - [`i18n`](/packages/i18n/README.md): Universal i18n instance for React projects. - [`prettier-config`](/packages/prettier-config/README.md): Universal Prettier configuration. -- [`tailwind-config`](/packages/tailwind-config/README.md): Universal Tailwind CSS configuration. +- [`renovate-config`](/packages/renovate-config/README.md): Universal Renovate configuration. +- [`tailwind`](/packages/tailwind/README.md): Universal Tailwind CSS configuration. - [`tanstack-query`](/packages/tanstack-query/README.md): Universal Tanstack Query instance and plugins. - [`theme`](/packages/theme/README.md): Universal theme configuration. - [`tsconfig`](/packages/tsconfig/README.md): Universal tsconfig for TypeScript projects. -- [`renovate-config`](/packages/renovate-config/README.md): Universal Renovate configuration. - [`utils`](/packages/utils/README.md): Utility functions, types. ## License diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json index fe11af6..0e17fe5 100644 --- a/packages/prettier-config/package.json +++ b/packages/prettier-config/package.json @@ -46,7 +46,7 @@ }, "dependencies": { "prettier-plugin-astro": "^0.14.0", - "prettier-plugin-tailwindcss": "^0.6.4" + "prettier-plugin-tailwindcss": "^0.6.5" }, "publishConfig": { "access": "public" diff --git a/packages/tailwind/README.md b/packages/tailwind/README.md new file mode 100644 index 0000000..c4a549c --- /dev/null +++ b/packages/tailwind/README.md @@ -0,0 +1,31 @@ +# @bit-ocean/tailwind + +![npm](https://img.shields.io/npm/v/@bit-ocean/tailwind?logo=tailwindcss&label=tailwind) + +> Universal Tailwind CSS configuration. + +## Installation + +```bash +pnpm add -D tailwindcss postcss autoprefixer @bit-ocean/tailwind +npx tailwindcss init -p +``` + +## Configuration + +Add the following styles to your `src/styles/index.scss` or global styles file: + +```scss +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +Then add the following tailwind config presets to your `tailwind.config.js`: + +```js +module.exports = { + presets: [require('@raipiot-infra/tailwind/preset')], + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'] +} +``` diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json new file mode 100644 index 0000000..0442602 --- /dev/null +++ b/packages/tailwind/package.json @@ -0,0 +1,40 @@ +{ + "name": "@bit-ocean/tailwind", + "version": "0.0.28", + "description": "Universal Tailwind CSS configuration.", + "author": "Bruce Song (https://github.com/recallwei/)", + "homepage": "https://github.com/bit-ocean-studio/infra#readme", + "bugs": "https://github.com/bit-ocean-studio/infra/issues", + "repository": { + "type": "git", + "url": "https://github.com/bit-ocean-studio/infra.git", + "directory": "packages/tailwind" + }, + "keywords": [ + "bit-ocean", + "bit-ocean-infra", + "tailwind", + "tailwind-config" + ], + "files": [ + "tailwind.config.ts" + ], + "exports": { + ".": "./tailwind.config.ts" + }, + "scripts": { + "type:check": "tsc --pretty --noEmit", + "cspell:check": "cspell --no-progress --show-suggestions --show-context --cache **", + "eslint:check": "eslint . --color --cache", + "eslint:fix": "eslint . --color --cache --fix", + "prettier:check": "prettier --check --cache --ignore-unknown --ignore-path=../../.prettierignore .", + "prettier:fix": "prettier --write --cache --ignore-unknown --ignore-path=../../.prettierignore ." + }, + "peerDependencies": { + "tailwindcss": "^3.4.4" + }, + "publishConfig": { + "access": "public" + }, + "license": "MIT" +} diff --git a/packages/tailwind/tailwind.config.ts b/packages/tailwind/tailwind.config.ts new file mode 100644 index 0000000..244c64b --- /dev/null +++ b/packages/tailwind/tailwind.config.ts @@ -0,0 +1,10 @@ +import type { Config } from 'tailwindcss' + +const config: Omit = { + theme: { + extend: {} + }, + plugins: [], + darkMode: ['class', '[data-theme="dark"]'] +} +export default config diff --git a/packages/tailwind/tsconfig.json b/packages/tailwind/tsconfig.json new file mode 100644 index 0000000..b03d7fb --- /dev/null +++ b/packages/tailwind/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@bit-ocean/tsconfig/base", + "include": ["tailwind.config.ts"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3462df2..214e406 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -272,11 +272,17 @@ importers: specifier: ^0.14.0 version: 0.14.0 prettier-plugin-tailwindcss: - specifier: ^0.6.4 - version: 0.6.4(prettier-plugin-astro@0.14.0)(prettier@3.3.2) + specifier: ^0.6.5 + version: 0.6.5(prettier-plugin-astro@0.14.0)(prettier@3.3.2) packages/renovate-config: {} + packages/tailwind: + dependencies: + tailwindcss: + specifier: ^3.4.4 + version: 3.4.4(ts-node@10.9.1(@swc/core@1.5.29)(@types/node@20.14.2)(typescript@5.4.5)) + packages/tsconfig: dependencies: typescript: @@ -5668,8 +5674,8 @@ packages: resolution: {integrity: sha512-7jRGJsexaRIyUzTk8uzXlP45cw6DQ5Ci4bTe0xCBCcuO1Fff8jJy9oI+kRCQKSdDFTSAArMSg8GpvzlKBtSaZA==} engines: {node: ^14.15.0 || >=16.0.0} - prettier-plugin-tailwindcss@0.6.4: - resolution: {integrity: sha512-3vhbIvlKyAWPaw9bUr2cw6M1BGx2Oy9CCLJyv+nxEiBGCTcL69WcAz2IFMGqx8IXSzQCInGSo2ujAByg9poHLQ==} + prettier-plugin-tailwindcss@0.6.5: + resolution: {integrity: sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==} engines: {node: '>=14.21.3'} peerDependencies: '@ianvs/prettier-plugin-sort-imports': '*' @@ -13987,7 +13993,7 @@ snapshots: prettier: 3.3.2 sass-formatter: 0.7.9 - prettier-plugin-tailwindcss@0.6.4(prettier-plugin-astro@0.14.0)(prettier@3.3.2): + prettier-plugin-tailwindcss@0.6.5(prettier-plugin-astro@0.14.0)(prettier@3.3.2): dependencies: prettier: 3.3.2 optionalDependencies: