nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Calcite Components with Tailwind CSS

ForrestLin

Is it OK to use Tailwind CSS with Calcite Components?

Trouver plus de publications taguées avec

Accepted answers

DitwanDPrice

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

All comments

ForrestLin

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?

ForrestLin

@DitwanDPrice

Thank you!

Forrest

DitwanDPrice

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.