tailwindcomponents / cheatsheet Goto Github PK

I noticed this cheatsheet template is being widely used among data analyst community. Thats how I got here. I would have few applications how to use the template. Sadly my programmer skills in type script, yarn, etc. are entry level and I am struggling with getting this app running.
Would it be possible to provide entry level guide for using this template, the project readme with three commands doesnt work for me even after installing npm and yarn on Windows.
Thank you for amazing work.

Hello,

I couldn't find placeholder text utilities on your webpage cheat sheet for text inputs.
The placeholder text colour can be changed with, for example, placeholder-gray-800.
There are other placeholder utilities shown in the docs.

problem

tailwind takes 16px as the default base font value and all the values are derived from it. if you customise your base font, then the pixel values displayed in the cheatsheet are not accurate.

solution

add a setting to customise the base font value and store it in local storage. the pixel values should take it into account when calculating.

so for example this:
max-h-1 | max-height: 0.25rem; | 4px

would become this if your base font is 15px:
max-h-1 | max-height: 0.25rem; | 3.75px

Hej,

when are you planning to update the website? Since the repo supports Tailwind V3 already (@khatabwedaa (9b115df)) and i think the cheatsheet is also already updated?

I see the max-height values are not updated yet.

Thank you for your work! :)

Think this could be a nice touch! ❇️

yarn build

I thinks it should be rm -rf ./public/cheatsheet && mv build ./public/cheatsheet

e.g. in the cheatsheet:

it incorrectly shows "flex-grow" as the css class for flex-grow: 1;

whereas in tailwind css v3.1, this has been changed to "grow" instead of "flex-grow":

Hi, after yarn install done and i write yarn start i get this error ! :
'SKIP_PREFLIGHT_CHECK' is not recognized as an internal or external command, operable program or batch file.

how can i fix it ?

thanks

The feature copy to clipboard (00e8ddd) is not working on macOS Chrome. Since the Document is not focused.

Maybe implement this solution.

If i find the time i will create a PR, but maybe you are faster. :P

I think it would be nice if I could be searching by category name, especially when starting on expanded view

Here is an example for searching effects category:

initial view

eff search

The only possible problem is that after accepting this change some search results will change, 'cause more results will be visible, here is example for spacing search query:

old

new

I believe this will greatly improve user experience and I've already implemented this change in my #32 PR
Any feedback is appreciated!

The flex property flex-grow: 1 is listed as flex-grow. According to the docs, it should simply be grow. grow-0 is correctly listed, however, for flex-grow: 0.

the Docs link goes to:
https://tailwindcss.com/docs/shrink
"404: This page could not be found"

when it should go to:
https://tailwindcss.com/docs/flex-shrink

Thanks a ton for this cheatsheet! I would be awesome if I could leave it in expand all view and search without the categories ending up in a collapsed state when they don't have any matches.

Reproduction:

1. go to https://tailwindcomponents.com/cheatsheet/
2. click expand all
3. search for px-2
4. delete your search
5. categories containing no matches for px-2 have transitioned to collapsed state.

I'd figure this out and do a pull request, but I'm still learning. Just putting this here in case someone sees it and has time. Thanks again! This is a great learning resource for me.

I love Tailwind CSS.
While I was working on the cheat sheet, I found this small issue.

Thanks.

Lots of browsers support Custom Search Engines. This change would allow me to type "tw" -> hit tab -> and type in a search term, and then I could open the tailwind cheatsheet to the specific query I'm thinking of. It'd be a huge ergonomic win!

“line-clamp” utility is missing in the doc cheat sheet.

The space-x-3.5 and equivalents, like space-y-3.5 and etc., are missing.

Position properties are missing the percentage values.

Example:
top-1/2
bottom-1/4

Tailwind 3.0 has finally been released with a number of new features: https://tailwindcss.com/blog/tailwindcss-v3

It would be nice to be able to specify a custom tailwind.config.js file and have the values in the cheatsheet correspond to those rather than the defaults.

in the sheet is rounded-3xl and 2xl are wrong.

2xl is 16px and 3xl is 24 px instead

probably typing error

The Border Radius property is completely wrong compared to the original documentation, the property at site contains undersized values where:

0.75rem = 10px
1rem = 12px,
1.5rem = 16px 

while it should be

0.75rem = 12px
1rem = 16px
1.5rem = 24px

the same issue occurs in all rounded related variables

First, I must say that this cheatsheet is incredible! Thank you for all your work.

I noticed that the link to Tailwind's documentation is broken in the Backgrounds > Gradient Color Stops section.

Current link: https://tailwindcss.com/docs/bacgradient-color-stops
Correct link: https://tailwindcss.com/docs/gradient-color-stops