Implementing TailwindCSS and Font Awesome to Make Labels (local and dynamic data) in HYPE!

[AlexSteele]

Recently I was working on the backend and front end of a Laravel App that made heavy use of tailwind css. TailwindsCSS was new to me, and for those of you who have not seen it - In their words, they say "Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center androtate-90 that can be composed to build any design, directly in your markup.”

I have had a lot of help form this forum over the years and wanted to give something back. This example file shows several ways to use tailwinds and hype with two methods, local and json. Also included with a layout that shows alerts and buttons, and a fun little (rough) package label simulator. The dynamic portion of the example file assumes you have access to a server. I have removed the examples and changed the location of everything to a GitHub repository so I can make adjustments more readily.

AeonDeveloper/Tumult-Hype-Tailwinds-Integration

changes to this file:
external links for CSS file, reduced the size of the hype output quite a bit. If you are using a CDN this can really help things out.

I hope you find this helpful! This is the first time I am uploading a file to the tips and tricks, any feedback is helpful.

Happy Coding!
~~ Alex Steele ~~

[MaxZieb (Loves Hype)]

Thanks for sharing that looks really nice.

You could give it a spin in using Hype Data Magic as it also works for innerHTML and combining it with the classes. It's in there and I haven't used it as much as I thought but it could work pretty nicely for Tailwind setups.

For example:

<div data-magic-key="slot[0].name" class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"></div>

---

You could also use JSONP instead of an regular JSON load to bypass CORS.

---

The thing would be if Hype could use the Tailwind build process to reduce its size on the fly and build @apply directives. This directive is part of the PostCSS build process as its still not supported by browsers. See can I use @apply.

For example:

.headline {
  @apply text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl;
}

And in innerHTML

<div data-magic-key="slot[0].name" class="headline"></div>

Although Tailwind is very opinionated about extracting styles as seen here:

Extracting Components - Tailwind CSS

---

Do you build with PostCSS or do you use the full Tailwind set? Never mind… found the answer in your example. You are using the full set (2.8 MB minified). That wouldn't really be an option for production, though. So, what are your plans to streamline the build?

[AlexSteele]

Thank you for this awesome feedback!

@MaxZieb

You could also use JSONP instead of an regular JSON load to bypass CORS.

I am intrigued and will look into this further!

@MaxZieb

So, what are your plans to streamline the build?

I had some ideas about this, not sure how I can implement them. More than likely, I personally will be using a php framework to integrate the hype files in, and relying on command line to do the mix down for use in Laravel, and in that case I would like to then do an import of the CSS resource into HYPE so its external. In the past, I have had some issues with linking external CSS files to HYPE but I think its been my lack of patience and I need to revisit this.

Not everyone will be using that approach, but if I am able to link the external file, it should be better. I am not sure, maybe there is a tool that can review only the CSS that is being used, and then extract only what is needed into a smaller CSS file for distribution.

Another type of streamlining - I noticed that when creating the test files to copy to the forum, all the sudden there were a lot of small adjustments that popped up in streamlining the test. I think writing a series of variable driven directives at the top of the script will help a lot, so I can tell the script which URL strings to load (between test.oshell.com vs www.oshell.com because they could literally two different servers). maybe something as simple as var mode = test; or var mode = production and then branching the URL used in the script).

@MaxZieb

You could give it a spin in using Hype Data Magic

I will! I will take another look at Data Magic because It looks pretty powerful.

[AlexSteele]

@MaxZieb

So, what are your plans to streamline the build?

After reviewing the files again, I realized that those long, exact URL pointers are not helping with making it easy to create examples. I generated a repository to the file, and I have updated the example with some changes. I am pointing to a version of the css that is in the same directory as the index.html file (referencing the hype resources folder) and also the .json files required are in there too. Not yet perfect but its an improvement for sure...

[Daniel]

Thanks for sharing this! And double thanks for giving back