12 ms·

Show HN: LangCSS – An AI Assistant for Tailwind

108 points by langcss 2y ago

Hi All This is my personal project that is an IDE and AI assistant for creating tailwind components and pages. You can chat to create designs, then make small edits yourself, and continue chatting to refine them. I am always working to improve the UX. I have a time limited demo page here: https://langcss.com/demo https://langcss.com/demo Please let me know what you think! Feedback is welcome. Tech wise, this just uses NextJS (Hosted on Docker) and Azure Open AI.

janpmz 2y ago
My thoughts: I love the idea. For a website that produces designs, your landing page looks a bit simple. I asked it to generate a table. Now I'm not sure if the progress bar on top shows the code generation progress or if I'm running out of demo time. It took a while but now I have a table, thats pretty cool :)
IncreasePosts 2y ago
FYI I can keep using the app past the demo mode if I just delete the modal that pops up.
- langcss 2y ago
  Shhh :-)
meerita 2y ago
Imagine you need an AI to write some bespoke syntax. This is one of the reasons Tailwind is not good: they wrote unnatural syntax. Functional CSS must have natural syntax https://www.fcss.club/syntax https://www.fcss.club/syntax, something you don't need cheatsheets or AIs to work.
- ng12 2y ago
  What? This isn't a syntax generator it's building full components.
  - dartos 2y ago
    They’re making a joke. Said another way (my interpretation): Imagine that you need an AI to write the bespoke tailwind syntax for you instead of having it write normal css.
- llamaimperative 2y ago
  `color--green:hover` is not a giant (or perhaps any) improvement over `hover:text-green-400`
  - meerita 2y ago
    what is the 400 for?
    - crucialfelix 2y ago
      https://tailwindcss.com/docs/text-color https://tailwindcss.com/docs/text-color Any tailwind class can have named colors ("green"), semantic colors "danger" and then you can chose the number of the gradient of that color. There are thousands of them. Only the ones you use get compiled into the css file.
    - llamaimperative 2y ago
      To have more than one type of green. You can use Tailwind with only one green if you want, too, but it doesn't make any sense (either in Tailwind or in FCSS)
      - meerita 2y ago
        We solve that with color--green, color--light-green, color--lighter-green, color--lightest-green, etc.
- nnnnico 2y ago
  Writing the whole css syntax as classes is almost like using the style="" attribute, and comes with an enormous css payload cost
  - crucialfelix 2y ago
    In practice it has a much smaller css payload cost than standard hand-written css classes. > Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network. - https://tailwindcss.com/docs/optimizing-for-production https://tailwindcss.com/docs/optimizing-for-production What does increase is the html or react payload. But at least it's only sending what you use. Most websites are sending all of the styling for all of the pages and states, even though the user never sees it. It takes work to optimize that away, and things go wrong often. There are many clever macros like `space-x-4` that compile to very tricky effects. You couldn't write that in the style attribute at all. https://tailwindcss.com/docs/space#add-horizontal-space-between-children https://tailwindcss.com/docs/space#add-horizontal-space-betw...
    - nnnnico 2y ago
      Yes! I was talking about the fcss framework and syntax proposed by the parent poster ( which doesn't have a "compilation" step for reducing the amount of unnecessary css as tailwind does )
  - meerita 2y ago
    Not really: https://www.fcss.club/why https://www.fcss.club/why
werdnapk 2y ago
You should have an option to output regular CSS. This tool looks handy, but I don't use tailwind.
casper14 2y ago
[flagged]
- deleted 2y ago
  [deleted]
crucialfelix 2y ago
Even though the tailwind docs are great and easily searchable, all the time I ask github copilot to translate legacy css to tailwind classes. Or ask it how to get a certain layout using tailwind classes. (grid, flex ... arg); or tell it what's wrong and ask why it's broken and how do I fix it. For anyone still wondering why wouldn't I just write css? Because my codebase is littered with orphaned dead css. You can try to use strict naming conventions to connect it to the component it was meant for, but in practice you end with more css, dead css, and you have to read two source code files: component and css.
- foxandmouse 2y ago
  I'd love a VS code extension that lets my type css and converts it to Tailwind.
  - deleted 2y ago
    [deleted]
- satvikpendem 2y ago
  Use PandaCSS, that's what I use for my CSS needs rather than Tailwind. It's a compile-time CSS-in-TS that works on the className attribute same as Tailwind, so no naming required.
rfz13 2y ago
Cool idea. On mobile, I can't see the features for each plan. I see check marks in each card, but I don't know what they represent.
sanitycheck 2y ago
All I'll say is that the I understand completely why the demo is time limited, however it took about 2.5 minutes to fully respond to my first instruction, though it did write some code eventually. There was no time left to see how well it could refine/fix what it had created. I'm not in the market for this (not convinced by Tailwind or by the AI assisted coding, yet) but people who are may need more than a few minutes to properly judge it.
- langcss 2y ago
  I see this comment alot, I have upped it to 20 minutes to err on the side of caution. Deploying now...
naiv 2y ago
nice tool. would be great to see different breakpoints in the preview
skilled 2y ago
This is a lot slower to use than simply copying components from a pre-built UI library and making your own changes, or giving syntax to ChatGPT and asking for edits. You wouldn’t use Tailwind and any of its surrounding products unless you knew the syntax and what it does. And the pricing is outrageous, this is more expensive than subscribing to ChatGPT, with not much benefit other than a visual preview that can be accomplished with copy/paste.
- langcss 2y ago
  Thanks for the feedback. > This is a lot slower to use than simply copying components from a pre-built UI library and making your own changes Correct. This is something I am aware of, and next steps would be to make it easier to search and add free (open source) components to build up the UI. In retrospect I probably should have started with that, and then AI'd it. > You wouldn’t use Tailwind and any of its surrounding products unless you knew the syntax and what it does. This is true, but often as a Tailwind user I am stumpted on "how to create the thing in my mind". A good example is gradient text, but where the bottom of a letter like g is not cropped. > And the pricing is outrageous, this is more expensive than subscribing to ChatGPT, with not much benefit other than a visual preview that can be accomplished with copy/paste. It might be. The $30/m price for an ChatGPT wrapper has to have very good fit for someone, and I am probably not there yet.
  - salomonk_mur 2y ago
    30 USD per month is extremely expensive for most web services in general.
ramon156 2y ago
[flagged]
- deleted 2y ago
  [deleted]
danvoell 2y ago
The future is wild, pretty cool! Would love to see something like this in replit. Right now its too much copy pasting from other tools.
jamesmurdza 2y ago
I made an OS tool does something similar—but for entire ReactJS components with TailwindCSS: https://react.gitwit.dev/ https://react.gitwit.dev/ (You need to sign in, then you have unlimited generations.) Source code: https://github.com/gitwitorg/gitwit-server https://github.com/gitwitorg/gitwit-server It's still in beta and pretty buggy, but happy for feedback as well!
- deleted 2y ago
  [deleted]
mvkel 2y ago
[flagged]
- deleted 2y ago
  [deleted]
dvaun 2y ago
AI tools have been fun to play with since ChatGPT initially came out. However, I’m finding that I lose my “sharpness” if I rely too heavily on any LLM for performing random tasks. Until something comes out which performs auto generation of boilerplate/project code (against technical specs) I’m going to stick with test generation, as that is the only consistent output from LLMs that makes sense in my workflow.
- deleted 2y ago
  [deleted]
- sprobertson 2y ago
  On the other hand it seems like LLMs' inability to generate perfect boilerplate, requiring me to go through and fix all the bugs and nits, is all that's keeping my "sharpness" at this point.
ansanabria 2y ago
Pretty cool idea! Though I tried to generate some styling for a modal, the LLM answered but nothing was shown on the editor. The other thing is that when I am typing in the chat input and press Enter I would expect the input to submit, but it just creates a new line.
lghh 2y ago
I gave it 1 sentence of instructions and it took beyond the 5 minutes to finish the response. It seems like a neat concept though!
tristanb 2y ago
Interesting, I have found ChatGPT struggles with CSS, and Tailwind. I tried this prompt for both ChatGPT and this; "Make me a three column layout using Tailwind where the first and second column are fixed widths, and the center column will expand to take the remaining space, but will ellipse any text that overflows it." You were able to deliver, ChatGPT was not.
gogogo_allday 2y ago
V0.dev is an alternative as well, but focuses on shadcn and react. Congrats on the launch. I enjoyed that it gave me progress updates as it worked.
- langcss 2y ago
  Amazingly similar, and has many of the ideas I want to go to. Damn VCs going to commodotize their compliment!
rbren 2y ago
This is neat! Which model are you using in the backend? We're working on a similar--but general-purpose--LLM-based software agent[1]. General purpose tasks are very hard, and we too are finding that tackling narrow use cases one at a time works much better! I have an open PR to start moving in this direction [2] [1] https://github.com/opendevin/opendevin https://github.com/opendevin/opendevin [2] https://github.com/OpenDevin/OpenDevin/pull/1238 https://github.com/OpenDevin/OpenDevin/pull/1238
- langcss 2y ago
  At the moment I will be honest: Just GPT-4 + a meaty system prompt. More work goes into the parsing of results to intepret what is code, and update the preview in real time.
ccleve 2y ago
The designs don't look great. Here's an idea: produce designs that use the commercial Tailwind components. Your designs will look great. Have a link for the user to buy the components if they don't already own them. Work out an affiliate deal with Tailwind Labs. You can get rid of the time limits and the pricing. If you start generating money for them they may buy your app.
- simple10 2y ago
  Yes, agreed. Modifying the tool to use other tailwind based UI frameworks would be useful. I'd pay for a fast tool that lets me describe an app UI or landing page concept and then shows me previews rendered in different frameworks, themes, and layouts. Most of my time wasted on frontend projects is fidgeting with initial layouts and themes. If I want to switch a tailwind theme from say square to rounded corners on all the components and cards, it's a pain unless I override the helper classes. So an AI tool for theming would be worth it IMO.
  - langcss 2y ago
    I agree with both of you, this would be a next step. Hopefully enough to salvage this a bit.
- gigatree 2y ago
  From what I’ve seen, Tailwind Labs isn’t a fan of collaborating with other companies - no knock on them just seems like they don’t feel the need to
LauraMedia 2y ago
I tried it out, asking it to create a button and a tabbar, modern styled. After 4 minutes, it came back with just the tabbar, that was unstyled. Not the best demo, to be honest.
- jgalt212 2y ago
  so many AI tools give me this experience. it makes me wonder if any AI hype men or bulls have actually used any of the tools in this space.
  - JTyQZSnP3cQGa8B 2y ago
    Around me, most people who drank the AI kool-aid are "ideas guys" who have never wrote a single line of code, or junior-level coders who believe I paste code from StackOverflow all day long. In a 8 hours day of work, I must write code at most for 2 or 3 hours, and any AI would certainly not help me unless it can understand the meaning and intention of weird C++ code. We're relatively safe for the moment.
harel 2y ago
The simple form I asked to create took nearly all the free time allotted and by the time it finished I couldn't see it because the pricing model was on top. Either way, I could have copy pasted components quicker, so speed is important here. Maybe provide some ready made prompts which take a known amount of time. I would have used one if I had the option instead of coming up with one.
TIPSIO 2y ago
I predict we still have a few years left before someone totally figures out AI and web UI. Tailwind will be a no brainer for it since it's all one line and would still be readable/tweakable to the user. Candidly, producing components from scratch like this, I just haven't seen anyone do a great job. Now, rewriting, tweaking, and plugging in content? Really good at modifying if you can get it to be fast.
teaearlgraycold 2y ago
I think one major failing here is you aren’t a designer yourself. The landing page makes that clear. Sorry, I know that’s harsh.
Takennickname 2y ago
With all due respect, this is ready to launch when you are using it for your own website.
_akhe 2y ago
I said "Make a cool game" and it replied with Creating a full game is a bit beyond the scope of what we can do here, especially since games typically require a lot of JavaScript and game logic, not just UI design. However, I can help you design a cool game UI using TailwindCSS! For example, we can create a simple game landing page that includes a hero section, game features, and a footer. Let's start with a basic layout: working on code, 822 characters... Understandable, but it didn't let me confirm, it just started building a landing page even though I asked for a game. I never got to see the end result, my demo seconds ran out before it finished making it and the pricing overlay appeared. However, I realized you can just Inspect Element and delete the pricing overlay and use the product as much as you want haha. So the second time around I said "design a basic landing page" and after several minutes it rendered what looks like a very stripped down default page with an image at the top and text sections with a copyright of 2023. Feedback: IMO it should not be a 5 minute timer, but just limit them to ~3 generations. And should move the validation to the backend, so people can't just delete the overlay and use the service for free (I could Block Element in AdBlocker and never see it again). Beyond that I would just iterate on quality. Thanks for sharing, it could be very good if it was faster and had a little higher quality outputs.
deleted 2y ago
[deleted]
toddmorey 2y ago
I know the idea is you save money by saving time but each of these AI services want another $30/mo and they all do kinda the same thing powered by the same models. I’m just so subscription fatigued.
- throwup238 2y ago
  > I’m just so subscription fatigued. I can help you with that for only $9.99 a month!
  - kingofthehill98 2y ago
    Honestly a FREE and simple web service for managing subscriptions sounds like a great idea. It could sent out emails every month saying how much you're paying for all your subscriptions, for how long you've been subbed to them, etc. If someone builds this, please do not ask for yet another subscription. At least make it self-hostable and charge for the hosted one.
    - wildhacks 2y ago
      I think it already exists (and yes it's a subscription based software haha). I think it's called rocketmoney?
- neverokay 2y ago
  I hate to do this but this is the type of app that is basically the new todo app. I create small agents like this all time in about 15 seconds, with a simple prompt like: You are an expert Tailwind CSS developer that I will ask for help. You may need to google the latest docs from Tailwind here: link. And I get all the help I need.
  - robotstxts 2y ago
    what a great tip, thanks
  - throwup238 2y ago
Fauntleroy 2y ago
Devs will do literally anything to avoid writing actual CSS
llmblockchain 2y ago
I think the whole "Let me tell you what I want and you make it for me" is the wrong approach here. I think it would be more informative and generative if you gave it an example and could work with the AI through iterations. For example, give it a Tailwind login form/page and have it create a dark version. Have it generate an alternative layout, etc.
- langcss 2y ago
  Yes I think I agree. Other people have made similar comments. I haven't made it obvious but you can start off with your own code, and then get it to iterate on that. E.g. 1. Get some code from https://v1.tailwindcss.com/components/forms https://v1.tailwindcss.com/components/forms 2. Paste into HTML window 3. Enter into chat "Can you make the sign in button here red?" and click Send. It will then make the button Red for the form you pasted in, keeping the rest as-is.
chrstphrknwtn 2y ago
[flagged]
- deleted 2y ago
  [deleted]
- skybrian 2y ago
  It looks ugly, but that’s neither the source code, nor the downloaded binary. It’s what you get after the React components render. (Or similarly for whatever framework you use.)
  - Culonavirus 2y ago
    Yep, but the killer feature for me is the composability. Take a dozen of components made by different authors, slap them together and it all just works, with no css conflicts and messes.
- Kiro 2y ago
  CSS is not a non-problem for me and I've been doing web development since IE6. Tailwind is the first time I've actually felt at peace with it. I even prefer your example over a cascading selector in a different file. I can instantly see how the links are styled and if I want to change one I can easily do so right there without having to create a new selector. I can also just copy-paste them somewhere else and know that they will look exactly the same.
- aaronharding 2y ago
  The docs address this actually: > Making changes in a project that has tons of custom CSS is worse. > You have to think up class names all the time — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named. You have to jump between multiple files to make changes — which is a way bigger workflow killer than you’d think before co-locating everything together. > Changing styles is scarier — CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site? > Your CSS bundle will be bigger — oof Check it out here: https://tailwindcss.com/docs/reusing-styles https://tailwindcss.com/docs/reusing-styles There are surprisingly a number of benefits when you allow this kind of duplication. It's a subtle idea but the idea is not all duplication is bad and not all duplication is alike.
amjnsx 2y ago
The app itself looks very basic and cheap. Can copilot really not do this? I have no idea because I don't use Tailwind but copilot knows the depths of some obscure npm libraries so I would assume so.
keepamovin 2y ago
Isn't the point of a library like tailwind that you don't need an AI assistant??? Sorry for the ghlibbesh comment but if you're summoning AI then why use tailwind? Just use regular.
- chrisandchris 2y ago
  Well, the last guy I've seen to use tailwand applied 15+ CSS classes to a div for styling. I don't know how he did it without AI, as the applied classes were not describing in any way IMHO. probably AI solves that for you, by generating another 50 classes and applying even more to your n levels of nested divs.
  - ametrau 2y ago
    Phew, so glad we’re not using stylesheets.
  - digging 2y ago
    Surely I'm not the only one who finds tailwind insanely easy to use, but I see so many people bashing it every day it baffles me. Who cares if a div has 15 classes? When writing React, I spend pretty minimal effort creating, debugging, or modifying TW classes, especially when using `classNames` so I can break them into logical chunks. The hardest part is... oh, I get it. The hardest part is when other people do a shit job of organizing their classes and I have to dig through them. But an LLM isn't going to solve that problem, only an actual, intelligent algorithm to standardize class arrangement would help, like prettier for tailwind classes.
    - otherme123 2y ago
      I tried, but it's not for me. I found myself proud of styling a button, before noticing that I spent an hour. A lot of classes are almost plain Css attributes, so you just ask yourself "why am I doing this instead of writting the Css myself, like in the old days?" It's a tell that people is making money by creating a new Bootstrap on top of Tailwind, and calling it "components". Or AI assistants. That said, if you enjoy Tailwind, good for you!
robotstxts 2y ago
a simple tool that does the same thing that others already do for free, charging 30 dollars. nah....
mediumsmart 2y ago
Life is short (or so I’m told) so why waste it doing something dumb? It’s easy to start working on something because it’s convenient, but you should always be questioning yourself about it. Is there something more important you can work on? Why don’t you do that instead?
deleted 2y ago
[deleted]
NeilSmith2048 2y ago
I would like to say that the website is well designed. But the most troublesome thing for UI is the tiny details like font spacing, placement of various elements. I think these issues are not solved by LLM at the moment
ojdon 2y ago
Is it worth prompting it to only show outputs for Tailwind 3 unless specified? First prompt I tried gave me a tailwind 2 CDN link in the example. Nice idea. Like it.
tnorthcutt 2y ago
FWIW your demo images are pretty unreadable to me. I can read them if I right click --> open image in new tab, and then zoom to full size.
MikeSub 2y ago
I liked the preview feature. But other than that I feel like regular GPT-4 can write much better code and much faster with a simple prompt like "Write the code for Component X, use Tailwind for styling"
- langcss 2y ago
  It is GPT-4 under the hood, so that is interesting.
mska 2y ago
Nice! I'm also building an online IDE [1] and was working on adding Chat feature for a while. The problem of making adjustments to an existing component is much more difficult than generating a new one from scratch. Also, the tokenization for raw HTML code produces too many tokens which drives up the cost. Optimizing the tokenization process for HTML could potentially reduce costs and enhance performance. [1] https://divmagic.com/studio https://divmagic.com/studio
firebaze 2y ago
* Navigate to openai.com * Create new account (API) * Deposit a small amount of money * Click "Assistants" * Create a new one, based on GPT-3.5 or GPT-4-turbo if you want to spend a few cents instead of millicents * Enter "You are an expert Tailwind CSS developer and you fulfill the requests presented to you to the best of your knowledge" as the system prompt * (add "The user will gift you a tip if your answer is good" for expert level answers) * Navigate to "Playground" and select your newly created assistant * Done Alternatively, download llama3 or any popular and current open weight LLM, run it with llama.cpp or llamafile and enjoy ChatGPT-3.5 and above levels of Tailwind Expertise I'm not saying the answers will be good, just that they will at least be at the same level.
- __experiment__ 2y ago
  remember that a lot of products sell convenience and time. this is one of them
haidousm 2y ago
p.s. you can just remove the overlayed div after the timer runs out to keep going
anko 2y ago
my demo ran out of time before it did anything :(
darepublic 2y ago
AI for CSS sure, but why tailwind? Why limit yourself like this
aleksiy123 2y ago
I use this GPT I setup prompt for. https://chat.openai.com/g/g-T9FuS9MCA-tailwindcss-expert https://chat.openai.com/g/g-T9FuS9MCA-tailwindcss-expert It actually works quite well. Need to try feeding it the docs sometime.
- Atotalnoob 2y ago
  It’s asking me to sign up for the paid ChatGPT subscription. Are you willing to share the prompt directly?
deleted 2y ago
[deleted]
langcss 2y ago
Just a note for anyone else doing something like this. I think uptime/ops has been rather successful for a HN post with 89 points / 117 comments. The costs of this post were $35 for OpenAI tokens. No one has reported any slowness or downtime. I am just hosting on the $5/m DO (Digital Ocean) app plaform. CPU spiked at 8% at the highest. Pages are served from the CDN that DO takes care of and the API backend (which doesn't use a CDN) is mostly node forwarding on requests to Azure. I didn't get analytics (I don't care, comments are more useful) in so can't say how many visitors. But CDN reports say 12000 requests per minute was the peak. Which probably includes all images and so on. So maybe 600 page loads per minute as a guess. I said in the post "Docker". That is probably true under the hood! But I meant to say "Digitial Ocean".
blini2077 2y ago
It doesn't look bad, but does it compare favourably with Vercel's "vo dev"?
- langcss 2y ago
  I just learned about Vercel's offering today from this post. Vercel is ahead here perhaps, as that is where I want to get to. Obviously having a free VC offering as a competitor is going to make me rethink this a bit!

108 points by langcss 2y ago

janpmz 2y ago

My thoughts: I love the idea. For a website that produces designs, your landing page looks a bit simple. I asked it to generate a table. Now I'm not sure if the progress bar on top shows the code generation progress or if I'm running out of demo time. It took a while but now I have a table, thats pretty cool :)

IncreasePosts 2y ago

FYI I can keep using the app past the demo mode if I just delete the modal that pops up.

langcss 2y ago
Shhh :-)

meerita 2y ago

Imagine you need an AI to write some bespoke syntax. This is one of the reasons Tailwind is not good: they wrote unnatural syntax. Functional CSS must have natural syntax https://www.fcss.club/syntax https://www.fcss.club/syntax, something you don't need cheatsheets or AIs to work.

ng12 2y ago
What? This isn't a syntax generator it's building full components.
- dartos 2y ago
  They’re making a joke. Said another way (my interpretation): Imagine that you need an AI to write the bespoke tailwind syntax for you instead of having it write normal css.
llamaimperative 2y ago
`color--green:hover` is not a giant (or perhaps any) improvement over `hover:text-green-400`
- meerita 2y ago
  what is the 400 for?
  - crucialfelix 2y ago
    https://tailwindcss.com/docs/text-color https://tailwindcss.com/docs/text-color Any tailwind class can have named colors ("green"), semantic colors "danger" and then you can chose the number of the gradient of that color. There are thousands of them. Only the ones you use get compiled into the css file.
  - llamaimperative 2y ago
    To have more than one type of green. You can use Tailwind with only one green if you want, too, but it doesn't make any sense (either in Tailwind or in FCSS)
    - meerita 2y ago
      We solve that with color--green, color--light-green, color--lighter-green, color--lightest-green, etc.
nnnnico 2y ago
Writing the whole css syntax as classes is almost like using the style="" attribute, and comes with an enormous css payload cost
- crucialfelix 2y ago
  In practice it has a much smaller css payload cost than standard hand-written css classes. > Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network. - https://tailwindcss.com/docs/optimizing-for-production https://tailwindcss.com/docs/optimizing-for-production What does increase is the html or react payload. But at least it's only sending what you use. Most websites are sending all of the styling for all of the pages and states, even though the user never sees it. It takes work to optimize that away, and things go wrong often. There are many clever macros like `space-x-4` that compile to very tricky effects. You couldn't write that in the style attribute at all. https://tailwindcss.com/docs/space#add-horizontal-space-between-children https://tailwindcss.com/docs/space#add-horizontal-space-betw...
  - nnnnico 2y ago
    Yes! I was talking about the fcss framework and syntax proposed by the parent poster ( which doesn't have a "compilation" step for reducing the amount of unnecessary css as tailwind does )
- meerita 2y ago
  Not really: https://www.fcss.club/why https://www.fcss.club/why

werdnapk 2y ago

You should have an option to output regular CSS. This tool looks handy, but I don't use tailwind.

casper14 2y ago

[flagged]

deleted 2y ago
[deleted]

crucialfelix 2y ago

Even though the tailwind docs are great and easily searchable, all the time I ask github copilot to translate legacy css to tailwind classes. Or ask it how to get a certain layout using tailwind classes. (grid, flex ... arg); or tell it what's wrong and ask why it's broken and how do I fix it. For anyone still wondering why wouldn't I just write css? Because my codebase is littered with orphaned dead css. You can try to use strict naming conventions to connect it to the component it was meant for, but in practice you end with more css, dead css, and you have to read two source code files: component and css.

foxandmouse 2y ago
I'd love a VS code extension that lets my type css and converts it to Tailwind.
- deleted 2y ago
  [deleted]
satvikpendem 2y ago
Use PandaCSS, that's what I use for my CSS needs rather than Tailwind. It's a compile-time CSS-in-TS that works on the className attribute same as Tailwind, so no naming required.

rfz13 2y ago

Cool idea. On mobile, I can't see the features for each plan. I see check marks in each card, but I don't know what they represent.

sanitycheck 2y ago

All I'll say is that the I understand completely why the demo is time limited, however it took about 2.5 minutes to fully respond to my first instruction, though it did write some code eventually. There was no time left to see how well it could refine/fix what it had created. I'm not in the market for this (not convinced by Tailwind or by the AI assisted coding, yet) but people who are may need more than a few minutes to properly judge it.

langcss 2y ago
I see this comment alot, I have upped it to 20 minutes to err on the side of caution. Deploying now...

naiv 2y ago

nice tool. would be great to see different breakpoints in the preview

skilled 2y ago

This is a lot slower to use than simply copying components from a pre-built UI library and making your own changes, or giving syntax to ChatGPT and asking for edits. You wouldn’t use Tailwind and any of its surrounding products unless you knew the syntax and what it does. And the pricing is outrageous, this is more expensive than subscribing to ChatGPT, with not much benefit other than a visual preview that can be accomplished with copy/paste.

langcss 2y ago
Thanks for the feedback. > This is a lot slower to use than simply copying components from a pre-built UI library and making your own changes Correct. This is something I am aware of, and next steps would be to make it easier to search and add free (open source) components to build up the UI. In retrospect I probably should have started with that, and then AI'd it. > You wouldn’t use Tailwind and any of its surrounding products unless you knew the syntax and what it does. This is true, but often as a Tailwind user I am stumpted on "how to create the thing in my mind". A good example is gradient text, but where the bottom of a letter like g is not cropped. > And the pricing is outrageous, this is more expensive than subscribing to ChatGPT, with not much benefit other than a visual preview that can be accomplished with copy/paste. It might be. The $30/m price for an ChatGPT wrapper has to have very good fit for someone, and I am probably not there yet.
- salomonk_mur 2y ago
  30 USD per month is extremely expensive for most web services in general.

ramon156 2y ago

[flagged]

deleted 2y ago
[deleted]

danvoell 2y ago

The future is wild, pretty cool! Would love to see something like this in replit. Right now its too much copy pasting from other tools.

jamesmurdza 2y ago

I made an OS tool does something similar—but for entire ReactJS components with TailwindCSS: https://react.gitwit.dev/ https://react.gitwit.dev/ (You need to sign in, then you have unlimited generations.) Source code: https://github.com/gitwitorg/gitwit-server https://github.com/gitwitorg/gitwit-server It's still in beta and pretty buggy, but happy for feedback as well!

deleted 2y ago
[deleted]

mvkel 2y ago

[flagged]

deleted 2y ago
[deleted]

dvaun 2y ago

AI tools have been fun to play with since ChatGPT initially came out. However, I’m finding that I lose my “sharpness” if I rely too heavily on any LLM for performing random tasks. Until something comes out which performs auto generation of boilerplate/project code (against technical specs) I’m going to stick with test generation, as that is the only consistent output from LLMs that makes sense in my workflow.

deleted 2y ago
[deleted]
sprobertson 2y ago
On the other hand it seems like LLMs' inability to generate perfect boilerplate, requiring me to go through and fix all the bugs and nits, is all that's keeping my "sharpness" at this point.

ansanabria 2y ago

Pretty cool idea! Though I tried to generate some styling for a modal, the LLM answered but nothing was shown on the editor. The other thing is that when I am typing in the chat input and press Enter I would expect the input to submit, but it just creates a new line.

lghh 2y ago

I gave it 1 sentence of instructions and it took beyond the 5 minutes to finish the response. It seems like a neat concept though!

tristanb 2y ago

Interesting, I have found ChatGPT struggles with CSS, and Tailwind. I tried this prompt for both ChatGPT and this; "Make me a three column layout using Tailwind where the first and second column are fixed widths, and the center column will expand to take the remaining space, but will ellipse any text that overflows it." You were able to deliver, ChatGPT was not.

gogogo_allday 2y ago

V0.dev is an alternative as well, but focuses on shadcn and react. Congrats on the launch. I enjoyed that it gave me progress updates as it worked.

langcss 2y ago
Amazingly similar, and has many of the ideas I want to go to. Damn VCs going to commodotize their compliment!

rbren 2y ago

This is neat! Which model are you using in the backend? We're working on a similar--but general-purpose--LLM-based software agent[1]. General purpose tasks are very hard, and we too are finding that tackling narrow use cases one at a time works much better! I have an open PR to start moving in this direction [2] [1] https://github.com/opendevin/opendevin https://github.com/opendevin/opendevin [2] https://github.com/OpenDevin/OpenDevin/pull/1238 https://github.com/OpenDevin/OpenDevin/pull/1238

langcss 2y ago
At the moment I will be honest: Just GPT-4 + a meaty system prompt. More work goes into the parsing of results to intepret what is code, and update the preview in real time.

ccleve 2y ago

The designs don't look great. Here's an idea: produce designs that use the commercial Tailwind components. Your designs will look great. Have a link for the user to buy the components if they don't already own them. Work out an affiliate deal with Tailwind Labs. You can get rid of the time limits and the pricing. If you start generating money for them they may buy your app.

simple10 2y ago
Yes, agreed. Modifying the tool to use other tailwind based UI frameworks would be useful. I'd pay for a fast tool that lets me describe an app UI or landing page concept and then shows me previews rendered in different frameworks, themes, and layouts. Most of my time wasted on frontend projects is fidgeting with initial layouts and themes. If I want to switch a tailwind theme from say square to rounded corners on all the components and cards, it's a pain unless I override the helper classes. So an AI tool for theming would be worth it IMO.
- langcss 2y ago
  I agree with both of you, this would be a next step. Hopefully enough to salvage this a bit.
gigatree 2y ago
From what I’ve seen, Tailwind Labs isn’t a fan of collaborating with other companies - no knock on them just seems like they don’t feel the need to

LauraMedia 2y ago

I tried it out, asking it to create a button and a tabbar, modern styled. After 4 minutes, it came back with just the tabbar, that was unstyled. Not the best demo, to be honest.

jgalt212 2y ago
so many AI tools give me this experience. it makes me wonder if any AI hype men or bulls have actually used any of the tools in this space.
- JTyQZSnP3cQGa8B 2y ago
  Around me, most people who drank the AI kool-aid are "ideas guys" who have never wrote a single line of code, or junior-level coders who believe I paste code from StackOverflow all day long. In a 8 hours day of work, I must write code at most for 2 or 3 hours, and any AI would certainly not help me unless it can understand the meaning and intention of weird C++ code. We're relatively safe for the moment.

harel 2y ago

The simple form I asked to create took nearly all the free time allotted and by the time it finished I couldn't see it because the pricing model was on top. Either way, I could have copy pasted components quicker, so speed is important here. Maybe provide some ready made prompts which take a known amount of time. I would have used one if I had the option instead of coming up with one.

TIPSIO 2y ago

I predict we still have a few years left before someone totally figures out AI and web UI. Tailwind will be a no brainer for it since it's all one line and would still be readable/tweakable to the user. Candidly, producing components from scratch like this, I just haven't seen anyone do a great job. Now, rewriting, tweaking, and plugging in content? Really good at modifying if you can get it to be fast.

teaearlgraycold 2y ago

I think one major failing here is you aren’t a designer yourself. The landing page makes that clear. Sorry, I know that’s harsh.

Takennickname 2y ago

With all due respect, this is ready to launch when you are using it for your own website.

_akhe 2y ago

I said "Make a cool game" and it replied with Creating a full game is a bit beyond the scope of what we can do here, especially since games typically require a lot of JavaScript and game logic, not just UI design. However, I can help you design a cool game UI using TailwindCSS! For example, we can create a simple game landing page that includes a hero section, game features, and a footer. Let's start with a basic layout: working on code, 822 characters... Understandable, but it didn't let me confirm, it just started building a landing page even though I asked for a game. I never got to see the end result, my demo seconds ran out before it finished making it and the pricing overlay appeared. However, I realized you can just Inspect Element and delete the pricing overlay and use the product as much as you want haha. So the second time around I said "design a basic landing page" and after several minutes it rendered what looks like a very stripped down default page with an image at the top and text sections with a copyright of 2023. Feedback: IMO it should not be a 5 minute timer, but just limit them to ~3 generations. And should move the validation to the backend, so people can't just delete the overlay and use the service for free (I could Block Element in AdBlocker and never see it again). Beyond that I would just iterate on quality. Thanks for sharing, it could be very good if it was faster and had a little higher quality outputs.

deleted 2y ago

[deleted]

toddmorey 2y ago

I know the idea is you save money by saving time but each of these AI services want another $30/mo and they all do kinda the same thing powered by the same models. I’m just so subscription fatigued.

throwup238 2y ago
> I’m just so subscription fatigued. I can help you with that for only $9.99 a month!
- kingofthehill98 2y ago
  Honestly a FREE and simple web service for managing subscriptions sounds like a great idea. It could sent out emails every month saying how much you're paying for all your subscriptions, for how long you've been subbed to them, etc. If someone builds this, please do not ask for yet another subscription. At least make it self-hostable and charge for the hosted one.
  - wildhacks 2y ago
    I think it already exists (and yes it's a subscription based software haha). I think it's called rocketmoney?
neverokay 2y ago
I hate to do this but this is the type of app that is basically the new todo app. I create small agents like this all time in about 15 seconds, with a simple prompt like: You are an expert Tailwind CSS developer that I will ask for help. You may need to google the latest docs from Tailwind here: link. And I get all the help I need.
- robotstxts 2y ago
  what a great tip, thanks
- throwup238 2y ago

Fauntleroy 2y ago

Devs will do literally anything to avoid writing actual CSS

llmblockchain 2y ago

I think the whole "Let me tell you what I want and you make it for me" is the wrong approach here. I think it would be more informative and generative if you gave it an example and could work with the AI through iterations. For example, give it a Tailwind login form/page and have it create a dark version. Have it generate an alternative layout, etc.

langcss 2y ago
Yes I think I agree. Other people have made similar comments. I haven't made it obvious but you can start off with your own code, and then get it to iterate on that. E.g. 1. Get some code from https://v1.tailwindcss.com/components/forms https://v1.tailwindcss.com/components/forms 2. Paste into HTML window 3. Enter into chat "Can you make the sign in button here red?" and click Send. It will then make the button Red for the form you pasted in, keeping the rest as-is.

chrstphrknwtn 2y ago

[flagged]

deleted 2y ago
[deleted]
skybrian 2y ago
It looks ugly, but that’s neither the source code, nor the downloaded binary. It’s what you get after the React components render. (Or similarly for whatever framework you use.)
- Culonavirus 2y ago
  Yep, but the killer feature for me is the composability. Take a dozen of components made by different authors, slap them together and it all just works, with no css conflicts and messes.
Kiro 2y ago
CSS is not a non-problem for me and I've been doing web development since IE6. Tailwind is the first time I've actually felt at peace with it. I even prefer your example over a cascading selector in a different file. I can instantly see how the links are styled and if I want to change one I can easily do so right there without having to create a new selector. I can also just copy-paste them somewhere else and know that they will look exactly the same.
aaronharding 2y ago
The docs address this actually: > Making changes in a project that has tons of custom CSS is worse. > You have to think up class names all the time — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named. You have to jump between multiple files to make changes — which is a way bigger workflow killer than you’d think before co-locating everything together. > Changing styles is scarier — CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site? > Your CSS bundle will be bigger — oof Check it out here: https://tailwindcss.com/docs/reusing-styles https://tailwindcss.com/docs/reusing-styles There are surprisingly a number of benefits when you allow this kind of duplication. It's a subtle idea but the idea is not all duplication is bad and not all duplication is alike.

amjnsx 2y ago

The app itself looks very basic and cheap. Can copilot really not do this? I have no idea because I don't use Tailwind but copilot knows the depths of some obscure npm libraries so I would assume so.

keepamovin 2y ago

Isn't the point of a library like tailwind that you don't need an AI assistant??? Sorry for the ghlibbesh comment but if you're summoning AI then why use tailwind? Just use regular.

chrisandchris 2y ago
Well, the last guy I've seen to use tailwand applied 15+ CSS classes to a div for styling. I don't know how he did it without AI, as the applied classes were not describing in any way IMHO. probably AI solves that for you, by generating another 50 classes and applying even more to your n levels of nested divs.
- ametrau 2y ago
  Phew, so glad we’re not using stylesheets.
- digging 2y ago
  Surely I'm not the only one who finds tailwind insanely easy to use, but I see so many people bashing it every day it baffles me. Who cares if a div has 15 classes? When writing React, I spend pretty minimal effort creating, debugging, or modifying TW classes, especially when using `classNames` so I can break them into logical chunks. The hardest part is... oh, I get it. The hardest part is when other people do a shit job of organizing their classes and I have to dig through them. But an LLM isn't going to solve that problem, only an actual, intelligent algorithm to standardize class arrangement would help, like prettier for tailwind classes.
  - otherme123 2y ago
    I tried, but it's not for me. I found myself proud of styling a button, before noticing that I spent an hour. A lot of classes are almost plain Css attributes, so you just ask yourself "why am I doing this instead of writting the Css myself, like in the old days?" It's a tell that people is making money by creating a new Bootstrap on top of Tailwind, and calling it "components". Or AI assistants. That said, if you enjoy Tailwind, good for you!

robotstxts 2y ago

a simple tool that does the same thing that others already do for free, charging 30 dollars. nah....

mediumsmart 2y ago

Life is short (or so I’m told) so why waste it doing something dumb? It’s easy to start working on something because it’s convenient, but you should always be questioning yourself about it. Is there something more important you can work on? Why don’t you do that instead?

deleted 2y ago

[deleted]

NeilSmith2048 2y ago

I would like to say that the website is well designed. But the most troublesome thing for UI is the tiny details like font spacing, placement of various elements. I think these issues are not solved by LLM at the moment

ojdon 2y ago

Is it worth prompting it to only show outputs for Tailwind 3 unless specified? First prompt I tried gave me a tailwind 2 CDN link in the example. Nice idea. Like it.

tnorthcutt 2y ago

FWIW your demo images are pretty unreadable to me. I can read them if I right click --> open image in new tab, and then zoom to full size.

MikeSub 2y ago

I liked the preview feature. But other than that I feel like regular GPT-4 can write much better code and much faster with a simple prompt like "Write the code for Component X, use Tailwind for styling"

langcss 2y ago
It is GPT-4 under the hood, so that is interesting.

mska 2y ago

Nice! I'm also building an online IDE [1] and was working on adding Chat feature for a while. The problem of making adjustments to an existing component is much more difficult than generating a new one from scratch. Also, the tokenization for raw HTML code produces too many tokens which drives up the cost. Optimizing the tokenization process for HTML could potentially reduce costs and enhance performance. [1] https://divmagic.com/studio https://divmagic.com/studio

firebaze 2y ago

* Navigate to openai.com * Create new account (API) * Deposit a small amount of money * Click "Assistants" * Create a new one, based on GPT-3.5 or GPT-4-turbo if you want to spend a few cents instead of millicents * Enter "You are an expert Tailwind CSS developer and you fulfill the requests presented to you to the best of your knowledge" as the system prompt * (add "The user will gift you a tip if your answer is good" for expert level answers) * Navigate to "Playground" and select your newly created assistant * Done Alternatively, download llama3 or any popular and current open weight LLM, run it with llama.cpp or llamafile and enjoy ChatGPT-3.5 and above levels of Tailwind Expertise I'm not saying the answers will be good, just that they will at least be at the same level.

__experiment__ 2y ago
remember that a lot of products sell convenience and time. this is one of them

haidousm 2y ago

p.s. you can just remove the overlayed div after the timer runs out to keep going

anko 2y ago

my demo ran out of time before it did anything :(

darepublic 2y ago

AI for CSS sure, but why tailwind? Why limit yourself like this

aleksiy123 2y ago

I use this GPT I setup prompt for. https://chat.openai.com/g/g-T9FuS9MCA-tailwindcss-expert https://chat.openai.com/g/g-T9FuS9MCA-tailwindcss-expert It actually works quite well. Need to try feeding it the docs sometime.

Atotalnoob 2y ago
It’s asking me to sign up for the paid ChatGPT subscription. Are you willing to share the prompt directly?

deleted 2y ago

[deleted]

langcss 2y ago

Just a note for anyone else doing something like this. I think uptime/ops has been rather successful for a HN post with 89 points / 117 comments. The costs of this post were $35 for OpenAI tokens. No one has reported any slowness or downtime. I am just hosting on the $5/m DO (Digital Ocean) app plaform. CPU spiked at 8% at the highest. Pages are served from the CDN that DO takes care of and the API backend (which doesn't use a CDN) is mostly node forwarding on requests to Azure. I didn't get analytics (I don't care, comments are more useful) in so can't say how many visitors. But CDN reports say 12000 requests per minute was the peak. Which probably includes all images and so on. So maybe 600 page loads per minute as a guess. I said in the post "Docker". That is probably true under the hood! But I meant to say "Digitial Ocean".

blini2077 2y ago

It doesn't look bad, but does it compare favourably with Vercel's "vo dev"?

langcss 2y ago
I just learned about Vercel's offering today from this post. Vercel is ahead here perhaps, as that is where I want to get to. Obviously having a free VC offering as a competitor is going to make me rethink this a bit!