feature request : Tailwindcss theme

[YacoubBelaoura]

This is a feature request.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

tailwindcss theme

a clone of the current bulma theme using tailwind

this theme is using TailwindCss V1.0.0-beta4, so it will be ready for the final verstion
with this configurations, only to keep the look

this is only a mockup using Vue and tailwindcss to divide it for each enso component, so it will be easy to add it.

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    // Some useful comment
    extend: {
      colors: {
        white: {
          default: "#ffffff",
          smoke: "#f5f5f5"
        },
        gray: {
          ...defaultTheme.colors.gray,
          290: "#4a4a4a",
          480: "#7a7a7a",
          860: "#dbdbdb"
        },
        blue: {
          ...defaultTheme.colors.blue,
          450: "#3273dc"
        },
        green: {
          ...defaultTheme.colors.green,
          450: "#23d160"
        }
      },
      fontFamily: {
        enso: ["Montserrat", "sans-serif"]
      },
      height: {
        13: "3.25rem"
      },
      inset: {
        13: "3.25rem"
      },
      boxShadow: {
        bnavbar: "0 1px 1px rgba(10, 10, 10, 0.35)",
        bbookmarks: "0 1px 1px rgba(10, 10, 10, 0.2)",
        bsidebar: "0 2px 3px rgba(10, 10, 10, 0.35)"
      }
    }
  },
};

if there is an other idea for a different theme, i can change it.
if its ok, i can start merging it with enso and make a PR.

ps: there is no 🐛 #125 (comment)

[aocneanu]

That's great. Let's focus on merging the RTL first and then we'll move on with tailwind.

Thanks!

[YacoubBelaoura]

ok that's great thanks.

[aocneanu]

@YacoubBelaoura If you have the time I guess it would be great if you could start working on this.

[YacoubBelaoura]

ok, i will start working on it ASAP.
but i think it will require a new package(s) so there will be 2 theme

• bulma
• tailwind v1.x.x

and there may be a need 2 refactor, to set the renderless components as separate packages.
or just add it to the current one.
i will see when i am done with it.

[aocneanu]

@YacoubBelaoura we should use the existing ui packages. Each package that is framework dependent has a bulma folder. The reason for this is that we can add tailwind/bootstrap/etc folders in the future.

The idea is to reuse the existing renderless components.

In fact, this is the main reason for the whole FE rewrite.

[YacoubBelaoura]

so all themes will be packed in one package.
this is great ,so the only change will be on enso.js and webpack.mix.js so that they both read THEME variable from .env and compile desired theme.

[aocneanu]

The only change should be this line, because the whole (local) app should be written in the same CSS framework

https://github.com/laravel-enso/enso/blob/master/resources/js/enso.js#L5

[YacoubBelaoura]

yes that's what i was talking about but there will be other compiled files that are not required.
for example if one used tailwind. the bulma css will be compiled and added to index.blade.php and there will be conflict. so what i was thinking about is : ."i didnt test it yet"

• add a new .env variable called THEME=tailwind or THEME=bulma
• use it in index.blade.php to add only the required css.
• on enso.js using dynamic import() like this

require('dotenv').config();
...
const App = () =>  import('@enso-ui/ui/${process.env.THEME}';
...

• and the same for webpack.mix.js so that it compile only the required THEME css.

and with that the user only change THEME and run yarn dev

[jlsjonas]

Definitely +1 on adding it the flag in webpack.mix.js to keep compile times down

[YacoubBelaoura]

@aocneanu . i have a question. regarding future upgrades and if there will be themes for other framework.

• i am almost (85% 'i was really busy with work lately ') to finish tailwind, and i found a problem regarding current enso features, "Cli, Forms, Tables" they are all configured for bulma, i did make some tailwind classes to imitate the current configs, but if there is future upgrades to match that first idea for other framework.

---

Edit: i have defined the same bulma classes with tailwind for this theme using @apply command.

[aocneanu]

Yeah, a busy period on my part too.

I guess there might be other css frameworks supported in the future, why not.

We can add a cli config where we can define the theme used for generating the files.

For forms & tables we should use separate template files built around the renderless ones for tailwind instead of reusing the bulma templates with mocked tailwind classes.

Ugrading the framework pages could be as easy as doing a search&replace for @enso/forms/bulma to @enso/forms/tailwind, the same for the other components.

What do you think?

[k33n]

@aocneanu any movement on this?

[curtisdelicata]

Is this still being worked on?