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?

Finde mehr Beiträge mit dem Tag

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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