search

hiteshchoudhary / fun-with-tailwind

A fun repo to play with tailwind
125 stars 6 forks source link

Suggestion for Tailwind series #1

Open hatemhosny opened 9 months ago

hatemhosny commented 9 months ago

Hi @hiteshchoudhary I first want to thank you for the great content you are providing.

I came across your video starting the Tailwind CSS series and I thought you may want to use LiveCodes for this series or for others.

LiveCodes is a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks, including JS, TS, React, Vue, Svelte, Solid, Tailwind CSS, CSS Modules, Python, Go, Ruby, PHP and others (see starter templates). The announcement post gives a general overview.

Tailwind CSS starter template: https://livecodes.io/?template=tailwindcss

LiveCodes is a client-side app. So all compilation and code transformation occur on the client with no server rounds, which can make it pretty fast.

For Tailwind CSS support, the official Tailwind JIT compiler is used. So, you can see the CSS output in real-time.

Screenshot:

image

Output CSS:

image

Also works for classes added in JSX as react components, and also Vue, Svelte, Solid and others:

image

The default editor on desktop is Monaco (the code editor used in VS Code), with same autocomplete, keyboard shortcuts, multi-cursor support, Emmet abbreviations and even Vim and Emacs modes. Code formatting is also supported using Prettier.

Projects can be shared, exported and deployed (to GitHub Pages). Code can be imported from many sources including GitHub.

LiveCodes is very configurable. Many of the features can be configured by query parameters

Playgrounds can also be embedded in any webpage, using a powerful, yet easy-to-use, SDK.

Comprehensive documentations are available with live demos, code samples and screenshots.

LiveCodes is free with unlimited usage, no ads and no account required. It can be easily self-hosted (if you want), and can be used for commercial projects (MIT license).

TheAlgorithms website uses LiveCodes as the official playground (see example).

Disclosure: obviously, I'm the author of LiveCodes.

I thought you would be interested. Otherwise, please feel free to close this. Thank you.

Gulezehranaqvi commented 3 months ago

i recently found you on youtube you are just great sir