Overview
LangCSS makes it easier to get custom Tailwind designs.
It has been very helpful for small agencies, freelancers and software developers to save a lot of time when working with Tailwind.
It not only knows the usual classes "mt-1" etc. but can help configure your Tailwind, and come up with @apply rules. All of this can be tested and iterated on in the web interface, with a built in Tailwind compiler that instantly shows you your results.
It can help with:
* Initial design of a page, button, form, navigation, etc
* Figure out how to produce something you have seen on the web in Tailwind
* SVGs
* Tweaking existing designs, e.g. that you got from a kit.
* Animations and Effects
* Much more
Because it is AI it knows more than Tailwind, so it can bring it's "Common Sense" and "General Knowledge" into play too.
It is also an IDE with code editors and a preview. It is damn useful even without the AI as a place to preview Tailwind snippets you find online, as it compiles it in the browser.
Features
- Intelligence - AI chat that will design your HTML, CSS and Tailwind Config
- Editors - IDE Environment with editors, tabs, and a preview window
- Instant preview - A preview that compiles Tailwind in real time
- Models - Choice of different AI models depending on your needs
- General Knowledge - Can do other things. Coding, SVGs, and so on
- All Tailwind Questions - From a simple button to an entire landing page
Comments
Comments
Inspiration After witnessing the power of AI chat to power apps and do more than just talk, I decided to embark on building an app to make Tailwind design a lot easier and faster. What it does You chat to the assistant and it generates HTML, Tailwind CSS and Tailwind Config to meet your needs. You can then make manual edits on any of this, and carry on the chat, seeing an up to date preview at all times. Tailwind that usually needs compiling on a dev machine is done directly in the browser. How I built it I used Visual Studio to create a SPA app using Vite and .NET. Then carried on the project in VSCode. Used React for the front end and C# for the back. Challenges I ran into The main challenge is context length of LLMs is too short for long HTML documents, and hallucinations can happen. These are still challenges I am looking to solve. Also LLMs aren't too artistic. Accomplishments that I'm proud of Getting Tailwind to compile in the browser. Tailwind is designed to run in Node.js (Rust for v4) so it is a challenge getting that to work in the browser when it assumes things like fs exist. There was no current working open source code for this so I made a go of it myself and open sourced that part. What's next for LangCSS More minor quality of life features in the editor etc. Overhaul of how the AI works, so it can handle larger documents.
Inspiration After witnessing the power of AI chat to power apps and do more than just talk, I decided to embark on building an app to make Tailwind design a lot easier and faster. What it does You chat to the assistant and it generates HTML, Tailwind CSS and Tailwind Config to meet your needs. You can then make manual edits on any of this, and carry on the chat, seeing an up to date preview at all times. Tailwind that usually needs compiling on a dev machine is done directly in the browser. How I built it I used Visual Studio to create a SPA app using Vite and .NET. Then carried on the project in VSCode. Used React for the front end and C# for the back. Challenges I ran into The main challenge is context length of LLMs is too short for long HTML documents, and hallucinations can happen. These are still challenges I am looking to solve. Also LLMs aren't too artistic. Accomplishments that I'm proud of Getting Tailwind to compile in the browser. Tailwind is designed to run in Node.js (Rust for v4) so it is a challenge getting that to work in the browser when it assumes things like fs exist. There was no current working open source code for this so I made a go of it myself and open sourced that part. What's next for LangCSS More minor quality of life features in the editor etc. Overhaul of how the AI works, so it can handle larger documents.