topic Calcite Components with Tailwind CSS in Calcite Design System Questions

Calcite Components with Tailwind CSS

ForrestLin — Wed, 03 Dec 2025 13:21:10 GMT

Is it OK to use Tailwind CSS with Calcite Components?

DitwanDPrice — Thu, 04 Dec 2025 18:42:50 GMT

Yes it is, there's a calcite tailwind preset package that can be found here: https://www.npmjs.com/package/@esri/calcite-tailwind-preset?activeTab=readme

ForrestLin — Thu, 04 Dec 2025 18:55:35 GMT

Thank you!

Forrest

ForrestLin — Thu, 04 Dec 2025 19:56:53 GMT

How to use calcite tailwind preset package?

I tried to install the package: npm i @esri/calcite-tailwind-preset, and I got error:

Successfully installed by running

npm i @esri/calcite-tailwind-preset --force or --legacy-peer-deps

I got:

I need to import it in the Tailwind CSS configuration file:

import calcitePreset from "@esri/calcite-tailwind-preset";

export default {

presets: [calcitePreset],

content: [ /* ... */ ],

};

Where is the Tailwind CSS configuration?