tailwindcss-stimulus-components | StimulusJS components for TailwindCSS | User Interface library
kandi X-RAY | tailwindcss-stimulus-components Summary
kandi X-RAY | tailwindcss-stimulus-components Summary
This is a set of components (Tabs, Modals, Dropdowns, etc) for TailwindCSS that uses StimulusJS controllers. The goal is to make using TailwindCSS as easy as Bootstrap when it comes to adding Javascript components.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of tailwindcss-stimulus-components
tailwindcss-stimulus-components Key Features
tailwindcss-stimulus-components Examples and Code Snippets
Community Discussions
Trending Discussions on tailwindcss-stimulus-components
QUESTION
How does one use the list-disc class to style bullets, using Tailwindscss?
My package.json includes:
...ANSWER
Answered 2021-Jun-02 at 08:16Tailwind's Preflight
reset resets lists to be unstyled by default. Without a list-disc
or list-decimal
utility class, lists will have no bullet or numbers. Using the list-disc
/list-decimal
sets the list-style-type
property, which sets the ::marker
pseudo-element to be bullets, numbers, or other things. This is the behavior you see in your first example. The bullet is the browser's default bullet.
When using Tailwind Typography, you should not need to use utility classes within the content, and you may run into unexpected issues with conflicting styles/specificity if you do. In Tailwind Typography, lists are styled by default. However, the typography plugin does not set the ::marker
pseudo-element with list-style-type
. Instead, it uses the ::before
pseudo-element, which allows for more control over the appearance of the bullet.
When using Tailwind Typography and the list-disc
utility, these two methods do not conflict, since they do different things, so both are displayed. The darker bullet is likely the ::marker
pseudo-element set by list-disc
, while the lighter gray bullet is the ::before
pseudo-element set by Tailwind Typography. Try using your browser's DevTools to see the pseudo-elements, as well as playing around with what properties are being set and how they affect the appearance.
To avoid this duplicate behavior, simply remove the list-disc
class from your list. If you need to customize your Tailwind Typography styles, see the Customization section in the docs. You can also poke around in the source to see how the default styles are set.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install tailwindcss-stimulus-components
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page