Awesome

re-com-tailwind

An extension of the re-com UI component library that is meant for use with TailwindCSS.

State of the Project

re-com-tailwind is in its minimally viable infancy. Right now it consists of re-com with the bootstrap dependencies removed. Many of the CSS values have not been converted to tailwind style classes. There are still dependencies on other CSS files. CSS Purity has not been attained.

If you would like to help out, please see the issues page.

Limitations

It's probably a bad idea to use re-com-tailwind and regular re-com components at the same time, because re-com-tailwind tampers with the CSS structures in re-com.

Demo

Run this in the re-com-tailwind directory:

lein watch

Wait until [:demo] Build completed. is displayed, then visit http://localhost:3449/ in your browser.

For comparison, the original re-com demo

Using re-com-tailwind

re-com-tailwind is available from clojars. Add it to your project.clj dependencies:

The re-com-tailwind components are, at this point, components from re-com with custom CSS settings. However, it is probably best to require them from the re-com-tailwind.core namespace, in case of future customization.

Functionality and documentation for re-com-tailwind components should be identical to that of re-com.

You'll need to include these asset folders in your app: https://github.com/BnMcGn/re-com-tailwind/tree/master/run/resources/public/assets

Your html file will need a reference to these two CSS files:

<link rel="stylesheet" href="assets/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="assets/css/re-com.css">

And a reference to the Roboto fonts (but this can be overridden relatively easily):

<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>

License

Distributed under The MIT License (MIT) - See LICENSE.txt