MCPcopy Index your code
hub / github.com/Seb-GRAF/tailwind-helper

github.com/Seb-GRAF/tailwind-helper @v1.1

Chat with this repo
repository ↗ · DeepWiki ↗ · release v1.1 ↗ · + Follow
158 symbols 256 edges 71 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

A Tailwindcss multi-tool



<a href="https://tailwindhelper.com"><strong>Visit the website »</strong></a>






<a href="https://github.com/seb-graf/tailwind-helper/issues">Report Bug</a>
·
<a href="https://github.com/seb-graf/tailwind-helper/issues">Request Feature</a>

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.

Extension points exported contracts — how you extend this code

Props (Interface)
(no doc)
components/Tooltip.tsx
Props (Interface)
(no doc)
components/CopyToClipboard.tsx
Props (Interface)
(no doc)
components/StyledInput.tsx
Props (Interface)
(no doc)
components/OutOfBounds.tsx
Props (Interface)
(no doc)
components/PinButton.tsx
Props (Interface)
(no doc)
components/FavoriteCategory.tsx
Props (Interface)
(no doc)
components/FavoriteButton.tsx
Props (Interface)
(no doc)
components/StyledRange.tsx

Core symbols most depended-on inside this repo

unitConverter
called by 16
utils/unitConverter.ts
getClosestItem
called by 10
utils/getClosestItem.ts
toggleOrientation
called by 4
components/PositionHelper/PlacementHelper.tsx
toggleOrientation
called by 4
components/ImageHelper/ObjectPositionHelper.tsx
hexToRgb
called by 4
components/Colors/ColorHelper.tsx
toggleOrientation
called by 4
components/LayoutHelper/PaddingHelper.tsx
toggleOrientation
called by 4
components/LayoutHelper/BorderRadiusHelper.tsx
hexToRgb
called by 4
components/LayoutHelper/ShadowHelper.tsx

Shape

Function 112
Interface 46

Languages

TypeScript100%

Modules by API surface

contexts/FavoritesProvider.tsx11 symbols
components/LayoutHelper/ShadowHelper.tsx7 symbols
components/Colors/ColorHelper.tsx7 symbols
components/layout/Layout.tsx6 symbols
components/layout/Widget.tsx5 symbols
components/PositionHelper/PlacementHelper.tsx4 symbols
components/LayoutHelper/PaddingHelper.tsx4 symbols
components/LayoutHelper/MarginHelper.tsx4 symbols
components/LayoutHelper/BorderRadiusHelper.tsx4 symbols
components/ImageHelper/ObjectPositionHelper.tsx4 symbols
components/PositionHelper/TranslateYHelper.tsx3 symbols
components/PositionHelper/TranslateXHelper.tsx3 symbols

For agents

$ claude mcp add tailwind-helper \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

Ask about this repo answers extend the page