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?

Vind meer berichten getagd met

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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