feat: move Tailwind preset to package (#11817)

**Related Issue:** #6602 

## Summary

✨📦✨

---------

Co-authored-by: Ben Elan <[email protected]>

Author: jcfranco

.github/workflows/chromatic.yml

@@ -22,6 +22,7 @@ jobs:
         run: |
           npm install
           npm --workspace="packages/calcite-design-tokens" run build
+          npm --workspace="packages/calcite-tailwind-preset" run build
           npm --workspace="packages/calcite-ui-icons" run build
           npm --workspace="packages/calcite-components" run build-storybook
       - name: Publish to Chromatic

package-lock.json

@@ -93,6 +93,7 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "3.0.2-next.5",
+    "@esri/calcite-tailwind-preset": "0.1.0",
     "@esri/eslint-plugin-calcite-components": "2.0.2-next.3"
   },
   "volta": {

packages/calcite-components/package.json

@@ -9,4 +9,4 @@
 # The rest of the files showed up in v2 and are likely related to the Stencil v4 bump.
 rm -rf ./dist/collection/demos ./dist/collection/tests ./dist/.storybook/ \
     ./dist/tailwind.config.js{,.map} ./dist/stencil.config.js{,.map} \
-    ./dist/calcite-preset.js{,.map} ./dist/types/tests ./dist/types/home
+    ./dist/types/tests ./dist/types/home

packages/calcite-components/support/cleanupDistFiles.sh

@@ -1,4 +1,4 @@
-import calcitePreset from "./calcite-preset";
+import calcitePreset from "@esri/calcite-tailwind-preset";
 
 export default {
   presets: [calcitePreset],

packages/calcite-components/tailwind.config.ts

@@ -0,0 +1,3 @@
+## Contributing
+
+Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/Esri/contributing).

packages/calcite-tailwind-preset/CONTRIBUTING.md

@@ -0,0 +1,13 @@
+# Licensing
+
+COPYRIGHT © 2025 Esri
+
+All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
+
+This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
+
+See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>
+
+For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
+
+email: <[email protected]>

packages/calcite-tailwind-preset/LICENSE.md

@@ -0,0 +1,46 @@
+# Calcite Tailwind Preset
+
+This package provides a Tailwind CSS preset for Calcite Design System, enabling consistent styling across your applications.
+
+## Usage
+
+Install the Calcite Tailwind preset:
+
+```bash
+npm install -D @esri/calcite-tailwind-preset
+```
+
+Then import it in your Tailwind CSS configuration file:
+
+```ts
+import calcitePreset from "@esri/calcite-tailwind-preset";
+
+export default {
+  presets: [calcitePreset],
+  content: [
+    /* ... */
+  ],
+};
+```
+
+## Note
+
+This package is updated as needed. If you require any critical updates, please reach out to the Calcite Design System team.
+
+## License
+
+COPYRIGHT © 2025 Esri
+
+All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
+
+This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
+
+See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>
+
+For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
+
+email: <[email protected]>
+
+## Third-party licenses
+
+See [THIRD-PARTY-LICENSES.md](./THIRD-PARTY-LICENSES.md).

packages/calcite-tailwind-preset/README.md

@@ -0,0 +1,3 @@
+## Third Party Licenses
+
+This packages does not have any third-party dependencies.

packages/calcite-tailwind-preset/THIRD-PARTY-LICENSES.md

@@ -0,0 +1,19 @@
+import calciteCoreConfig from "@esri/eslint-config-calcite/core.js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: ["**/dist"],
+  },
+
+  {
+    extends: [calciteCoreConfig],
+
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+        project: ["tsconfig-eslint.json"],
+      },
+    },
+  },
+);

packages/calcite-tailwind-preset/eslint.config.mjs

@@ -0,0 +1,6 @@
+import baseConfig from "../../lint-staged.config.mjs";
+
+export default {
+  ...baseConfig,
+  "*.{ts,tsx,mjs,cjs}": ["eslint --fix", "prettier --write"],
+};

packages/calcite-tailwind-preset/lint-staged.config.mjs

@@ -0,0 +1,32 @@
+{
+  "name": "@esri/calcite-tailwind-preset",
+  "version": "0.1.0",
+  "description": "Tailwind CSS preset for the Calcite Design System",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Esri/calcite-design-system.git",
+    "directory": "packages/calcite-tailwind-preset"
+  },
+  "license": "SEE LICENSE.md",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "THIRD-PARTY-LICENSES.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf dist node_modules .turbo",
+    "lint": "concurrently npm:lint:*",
+    "lint:json": "prettier --write \"**/*.json\" >/dev/null",
+    "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"**/*.md\" --fix --dot --ignore-path .gitignore --ignore-path ../../.gitignore",
+    "util:update-3rd-party-licenses": "tsx ../../support/createThirdPartyLicenses.ts"
+  },
+  "peerDependencies": {
+    "@esri/calcite-design-tokens": "^3.0.2-next.3",
+    "tailwindcss": "^3.0.0 < 4.0.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

packages/calcite-tailwind-preset/package.json

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
 import plugin from "tailwindcss/plugin";
 
@@ -288,7 +287,7 @@ export default {
       addUtilities(newUtilities);
     }),
     plugin(({ addUtilities, theme }) => {
-      const colors = flattenColorPalette.default(theme("borderColor"));
+      const colors = flattenColorPalette(theme("borderColor"));
       delete colors["default"];
 
       const colorMap = Object.keys(colors).map((color) => ({

packages/calcite-components/calcite-preset.ts renamed to packages/calcite-tailwind-preset/src/index.ts

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "declaration": true,
+    "esModuleInterop": true,
+    "lib": ["dom", "dom.iterable", "ES2023"],
+    "module": "node16",
+    "moduleResolution": "node16",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "target": "ES2022"
+  },
+  "exclude": ["node_modules", "dist"]
+}

packages/calcite-tailwind-preset/tsconfig-base.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig-base.json",
+  "include": ["**/*.*"]
+}

packages/calcite-tailwind-preset/tsconfig-eslint.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist"
+  },
+  "extends": "./tsconfig-base",
+  "include": ["src/index.ts", "vite.config.mts"]
+}

packages/calcite-tailwind-preset/tsconfig.json

@@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import dts from 'vite-plugin-dts'
+import { version } from "./package.json";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      formats: ["cjs"],
+      fileName: () => "index.js",
+    },
+    rollupOptions: {
+      external: ["tailwindcss"],
+      output: {
+        banner: `/*!
+All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/${version}/LICENSE.md for details.
+*/`,
+      }
+    },
+  },
+  plugins: [
+    dts({
+      rollupTypes: true
+    }),
+  ],
+});

packages/calcite-tailwind-preset/vite.config.mts

@@ -74,6 +74,9 @@
     "packages/calcite-design-tokens": {
       "component": "@esri/calcite-design-tokens"
     },
+    "packages/calcite-tailwind-preset": {
+      "component": "@esri/calcite-tailwind-preset"
+    },
     "packages/calcite-ui-icons": {
       "component": "@esri/calcite-ui-icons",
       "extra-files": ["docs/index.html"]