How do I get a list of all tailwind classes/utilities in development? #10379
Unanswered
praneetrohida
asked this question in
Help
Replies: 8 comments 15 replies
-
|
This would not really be possible for v3 – there's an infinite amount of classes possible (due to the arbitrary features) and even without these, if you really wanted every single class possible, you would need to generate every possible combination of the variants, (like Footnotes
|
Beta Was this translation helpful? Give feedback.
4 replies
-
|
Ah, okay! So maybe not list of all possible classes, but maybe a JSON of all defined features and primitives based on the config + the default ones? How does the vscode extension do it? |
Beta Was this translation helpful? Give feedback.
-
|
Somewhere in here perhaps? https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/src/server.ts |
Beta Was this translation helpful? Give feedback.
-
|
Yes! Planning to dive into the codebase. Thank you 🙌 |
Beta Was this translation helpful? Give feedback.
-
|
That's why noone should be using Tailwind. You are digging yourself into a sand dune and you will never get out of it. |
Beta Was this translation helpful? Give feedback.
-
|
Is possible to generate list of classes starting from a "tailwind.config.js" file, so "content" and "safelist" ? something like: edited Then I used these regex pattern to generate a string for every possible case. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
This might help: https://gist.github.com/cvan/4cfe619af1da57bafd65122ef6e5936a |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
is there any solutions |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
hey there 👋🏼 hope this was helpful 😁 |
Beta Was this translation helpful? Give feedback.
7 replies
-
|
Thank You! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this list :) It needs to be updated with the new versions of Tailwind, but definitely something that can be used. I created a CMS that uses Tailwind and DaisyUI for designing the templates inside admin panel, and added this list for autocomplete feature, you have a YT video about it working ( on a phone ) here https://youtu.be/oMbyezV5XdA?si=5zlbuwHW1gfys0I8 And here is the project : https://github.com/nebojsatomic/IDE21 Still work in progress, but something usable already. |
Beta Was this translation helpful? Give feedback.
-
|
@nebojsatomic I've crawled it for tailwind v3.4.4 , the classlist in my github https://github.com/aryomuzakki/tw-prefixer |
Beta Was this translation helpful? Give feedback.
-
|
thanks @aryomuzakki :) |
Beta Was this translation helpful? Give feedback.
-
DaisyUI ClassesHello everyone 👋🏼, Today, I’ve been working on adding support for DaisyUI classes in my iOS website builder app, CAOCAP. 🚀 I believe this feature could be quite beneficial for your projects as well. |
Beta Was this translation helpful? Give feedback.
-
|
Hi folks! You can obtain all the information from Tailwind libraries, you just need to dig in a little. Please check this out: https://stackblitz.com/edit/tailwind-language-server-wb3afz?file=README.md,index.js 🤩 |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Most of the people use tailwind-config-viewer on their local machine. I uploaded this on https://tailwind-config-viewer.onrender.com/. You can find all classes with examples there. |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
This VS Code extension is gold. For anyone trying to figure out what CSS utility classes Tailwind generates when you start updating the theme/config, visually being able to inspect changes in your code editor is nothing short of essential. https://marketplace.visualstudio.com/items?itemName=KalimahApps.tailwind-config-viewer |
Beta Was this translation helpful? Give feedback.
-
|
Hello! I am leaving a comment because it seems to be a similar topic to #12653. If you need a list of variants, you can refer to this document. If you need a list of classnames without variants, try the following steps:
|
Beta Was this translation helpful? Give feedback.
3 replies
-
|
Can add my 5 cents here. #!/usr/bin/env awk -f
/^\./ {
gsub(/[\.,\\]/, "", $1)
classnames = classnames " " $1
}
END {
printf("%s", classnames) > "tw-completions.txt"
close("tw-completions.txt")
}
This will produce a txt file, containing all base classnames without other information from |
Beta Was this translation helpful? Give feedback.
-
|
Another approach is with
--languages=my_css
--kinds-all=*
--fields=*
--recurse
--langdef=my_css
--langmap=my_css:.css
--regex-my_css=/^\.([A-Za-z0-9_-]+)\\?([\.\/0-9]*)/\1\2/c,class,classes/Note! Don't forget to save Also |
Beta Was this translation helpful? Give feedback.
-
|
Works great for v3, but not v4 now that safelist is replaced by |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm trying to create a tool around Tailwind.
What I need is a list/object of all available Tailwind classes in dev mode, so I can parse it and do some stuff with it.
I looked in
node_modules/tailwindcssand also tried to see how the vscode extension does it, but I feel lost. Can someone please point me in the right direction?Beta Was this translation helpful? Give feedback.
All reactions