https://github.com/Seb-GRAF/tailwind-helper

Tailwindhelper | A Tailwind css multitool for visualizing classes, converting units, and finding colors
https://github.com/Seb-GRAF/tailwind-helper

css design developer-tools tailwind tailwindcss

Last synced: about 1 month ago
JSON representation

Tailwindhelper | A Tailwind css multitool for visualizing classes, converting units, and finding colors

• Host: GitHub
• URL: https://github.com/Seb-GRAF/tailwind-helper
• Owner: Seb-GRAF
• License: mit
• Created: 2022-08-01T13:49:51.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-08T14:07:13.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T01:33:27.388Z (5 months ago)
• Topics: css, design, developer-tools, tailwind, tailwindcss
• Language: TypeScript
• Homepage: https://tailwindhelper.com
• Size: 3.37 MB
• Stars: 131
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
 




 

  

 





    A Tailwindcss multi-tool

    


    Visit the website »

    


    


    Report Bug

    ·

    Request Feature



# What is it?

Tailwindhelper assists you in styling with tailwindcss. You can visualize different settings, convert values into tailwind classes, figure out the closest colors with hex values and more.

## Example case:

> You have a figma design and want to know what the Tailwind class of a 26px font size is?

Simply use the Font size helper and then copy and paste the class into your html element.

 


# ✅ Current helpers

### Text

- Font size

- Font weight

- Letter spacing

- Text color

### Layout

- Margin

- Padding

- Border radius

- Box shadow

### Positions

- Positioning

- Placement

- Translate (x/y)

### Grid

- Grid template columns

- Gris template rows

- Gap

### Images

- Object Fit

- Object Position

- Filters

### Colors

- Tailwind color list

- Color picker

 


# License

Licensed under the MIT License.