feat(tailwind): ✨ add tailwind config module

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

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"

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}']
+}
+```

packages/tailwind/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@bit-ocean/tailwind",
+  "version": "0.0.28",
+  "description": "Universal Tailwind CSS configuration.",
+  "author": "Bruce Song <[email protected]> (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"
+}

packages/tailwind/tailwind.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from 'tailwindcss'
+
+const config: Omit<Config, 'content'> = {
+  theme: {
+    extend: {}
+  },
+  plugins: [],
+  darkMode: ['class', '[data-theme="dark"]']
+}
+export default config

packages/tailwind/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@bit-ocean/tsconfig/base",
+  "include": ["tailwind.config.ts"]
+}