Initial discussion

[msaraiva]

From the slack channel:

harmon:

anyone make progress with a tailwind surface component library? I am finding tailwind a bit too flexible to easily abstract further - also need to keep the class names intact (not do string concat) to ensure purge css works when generating production css

also to do things like modals effectively - does need some js code - we should try to standardize the approach for shipping components with some hooks, or that require alpine..

lnr0626:

i've been working with tailwind ui, so I can't release the components i've built :-(

harmon:

hmm yea - is it just a tailwind plugin? or how does tailwind UI extend on tailwind? - Think i might pull the trigger on that also... would like the tailwind ui components...

suppose requiring alpinejs on a tailwind component lib would be sensible - it would probably be the recommended approach from the tailwind devs is tailwind UI really just some markup they give you? - they must mention not sharing that in the license agreement...

pretty thin line between creating some tailwind button component library (for example) and not stepping on the tailwind UI license

lnr0626:

they give you the markup, tell you which classes to modify on which elements, and a few other things (they might have some vue/react stuff, but i haven't paid attention to that)

the cost was worth it for me, but i also don't have anyone that's dedicated to doing design and so it just help relieve cognitive load

harmon:

it is otherwise a very fair license, stifling a bit for this type of idea though..

yea agree, value is there for sure

lnr0626:

yeah, hard to create a component lib once you've seen the actual markdown cause at the end of the day they aren't doing anything too crazy (i.e. there aren't too many ways to create a button that has an outline on focus and some changed emphasis on hover)

harmon:

Examples of use not allowed by the license:

• Creating a React or Vue version of Tailwind UI and making it available either for sale or for free

straight from the license ^ - think that would apply to us also

best we could do is streamline getting tailwind setup in a phoenix/liveview/surface project

paulstatezny:

Yeah, It’s too bad, we’re doing the same thing with TailwindUI, which is really great stuff.

msaraiva:

it would be great to have our own surface_tailwind. Regarding the license which states that is not allowed to:

• Creating a React or Vue version of Tailwind UI and making it available either for sale or for free

I believe they mention React and Vue because that's what they use to provide components for JS. Creating similar components using Surface would already be different in many ways as we're creating server-side components using another language. As far as I can see, the text above doesn't say we can't create server-side templates that use some of the same utility classes. That would be really hard to do since the utility classes are common and free and there are not too many different ways to create some of the simplest components. This drives me to a few question. Are there any other TailwindCSS based component suites out there? Are they free? If so, don't they use the same (or similar) set of utility classes to build their components?

harmon:

that is the complication really - some of the UI components are free, some are not - would be difficult to say if we did create a toggle for example - if it was the same utility classes as is used in the TailwindUI components (even by accident) - would that somehow be in breach of the tailwind UI license?

[msaraiva]

@lnr0626, @paulstatezny and @harmon25 in case any of you knows anyone else that could be also interested in Tailwind components for Surface, please ping them so they can join us on this discussion.

@miguel-s and @Malian I'm not sure what CSS solutions you're using but since you're both very active contributors, in case you're using (or have plans to use) Tailwind, feel free to join us as well. BTW, in case you use Slack, it would be great to have you on the #surface channel ;)

Cheers.

[miguel-s]

I do use Tailwind CSS and UI, and also AlpineJS in my own projects :D

Don't now how I missed the #surface slack channel, will join you there soon!

[paulstatezny]

Ping @capitalist

[paulstatezny]

So I think it's established that we cannot use any markup from Tailwind UI.

That said, is the purpose of this project to cook up custom generic components from scratch? The Bulma version uses official Bulma markup instead of doing it from scratch, right?

[msaraiva]

is the purpose of this project to cook up custom generic components from scratch?

If we can't find any free set of components that we can use, then yes.

The Bulma version uses official Bulma markup instead of doing it from scratch, right?

Yes. Both surface_bulma and surface_bootstrap use their official counterparts.

Just for the record, I think TailwindUI is great and it's more than fair that it has a commercial licence. What I think it's unfair is that Vue.js users get ready-to-use components while a Surface/LV user will have to roll its own suite of components, which cannot be shared to make the life of others easier, not even with those that also bought the licence. It seems like such a waste of resources.

An effort to provide an opensource alternative for Surface/LV would be fantastic for the ecosystem.

[paulstatezny]

100% agreed, and supportive of that. I was asking to make sure I understood the strategy/approach for this project.

[harmon25]

What I think it's unfair is that Vue.js users get ready-to-use components while a Surface/LV user will have to roll its own suite of components...

I don't think there are any official TailwindCSS/UI Vue or React component suites. Most component suites I.E semantic-ui, antd, materialize have a consistent style, or 'look' to them - the point of tailwind is that it could look however you want. (just tweak the classes)

I think this project is interesting - the alpine version would work nicely with LV, appears that is a WIP...

Here are the Tailwind Docs regarding JS integration

[miguel-s]

I don't think there are any official TailwindCSS/UI Vue or React component suites.

TailwindLabs are working on something along these lines with HeadlessUI. It's still very early and only React and Vue (Alpine coming soon).

This project is under the MIT License, so maybe we could follow what they're doing?

[Malian]

I do use Tailwind CSS, Tailwind UI, and also AlpineJS in my projects.

I will join the Surface community on slack!

[tmepple]

@msaraiva

a Surface/LV user will have to roll its own suite of components, which cannot be shared to make the life of others easier, not even with those that also bought the licence

Are you sure Adam wouldn't let us share our derived components with others who have already bought the license... maybe from their password protected site? It seems like most of us here have already bought the license and are all reinventing the wheel leveraging the same stack anyway.

[msaraiva]

Are you sure Adam wouldn't let us share our derived components with others who have already bought the license... maybe from their password protected site?

@tmepple I'm not sure, either way, I believe the goal of this project shoud be to have an opensource suite of components that doesn't depend on TailwindUI and by the feedback so far, it looks like everyone using TailwindCSS is already using TailwindUI so I'm not sure I'll be able to bring enough people/companies to invest time and resources on this effort. Maybe the best thing to do is to wait for a free alternative to come up so we can build components on top of it.

I don't think there are any official TailwindCSS/UI Vue or React component suites.

@harmon25 there will be soon https://twitter.com/adamwathan/status/1362877785480564738?s=20

[BryanJBryce]

The reason I found this was because I thought I'd just take the Bulma components and redo them with Tailwind. Might be worth having a project here so that people can start adding components. Just don't copy TailwindUI.

[msaraiva]

Hi @BryanJBryce!

@olivermt is working on a more complete suite of components based on bootstrap (https://github.com/surface-ui/surface_bootstrap/). It should be released in the next few days. After its release, maybe we could try to mimic the same API for Tailwind. I'm sure we'll not be able to have the exact same API but we might be able to keep it as similar as possible.

[Menkir]

There is https://tailwindcomponents.com/ where are free tailwindcss components. Doesn't help for the ui license problem but there is already a community making custom components that we can freely use.

[DEvil0000]

Totally in the same boat - we also have the license and are in need to write own surface components.

From the license it is quite clear that you can only open source end products not component based libs. I however can imagine to get around this limitation without violation of the license. The library would need to use its own set of CSS classes which are intermediate classes (probably bulma like) and just inherit from other classes (bulma by default). They could however also inherit (or map) from(/to) CSS classes of tailwind without providing tailwind CSS classes, whole tailwind UI themes or a complete mapping.
So every user of this lib would need to map its CSS classes to some CSS classes of their desire when not using defaults.

This could possibly be done in some LESS like approach

.inputbase() {
  /* your base code */
}

.someInput {
  .inputbase;
  /*some input special code */
}

So in general more like plugging in CSS later by the user of the lib.

edit: which slack?