Support for Tailwind CSS

[yiss]

I discovered AlephJs and I really love it, it just works out of box like magic. I'm trying to add support for TailwindCSS but I have no I idea where to start.
The documentation here suggest to use PostCSS but I don't think there is a PostCSS plugin in Deno yet : https://tailwindcss.com/docs/installation

---

Edit :
I checked this pull request #41 and I think we can do something similar for PostCSS

[shadowtime2000]

@yiss Yeah, there isn't an official way to use PostCSS with Deno but @ije created a CDN which converts NPM packages to Deno compatible packages. I think Aleph already uses that but I don't think it is possible to configure that. Once configuration is allowed, it would probably pretty simple to use Tailwind.

[ije]

@yiss, sorry i'm not user of tailwind, you can try to import tailwind via CDN:

// app.tsx
import 'https://esm.sh/tailwindcss/dist/tailwind.min.css'

but this does not support tailwind's build features, likes tree-shaking, theme, directives, etc.

[ije]

as @shadowtime2000 mentioned, aleph support postcss with autoprefixer plugin out-of-the-box, but i'm not sure TailwindCSS can be configured in postcss.config.json:

{
  "plugins": ["tailwindcss", "autoprefixer"]
}

[shadowtime2000]

We could do a postcss.config.(js|ts) instead:

import autoprefixer from "https://esm.sh/autoprefixer";
import tailwindcss from "https://"

export default {
	plugins: [tailwindcss, autoprefixer]
};

or whatever else is the format for adding plugins to PostCSS (I haven't used it that much).

[ije]

@shadowtime2000 "plugins": ["tailwindcss", "autoprefixer"] means aleph will import those plugins automaticlly from ems.sh where the postcss module is from, autoprefixer plugin can work well but the tailwindcss i'm not sure.

[yiss]

@ije @shadowtime2000
I was thinking of doing something like this :
plugins/postcss.ts would be the same as sass-loader plugin.
and in the plugins we can do :

import taildwindcss from ' https://'
import autoprefixer from ' https://'

export default {
plugins: [...otherPlugins, postcss([tailwindcss({}), autoprefixer({})]
}

I'm not sure what do you think ?

[ije]

@yiss i want to support postcss out of the box, no extra plugins needed, if you want to configure the postcss plugins you can do like:

{
  "plugins": [{"name": "tailwindcss", "options": {}}, {"name": "autoprefixer", "options": {}}]
}

[yiss]

@ije Seems reasonable since most people would want to use PostCSS and might not want any other plugins. I have a question though, is there a way to specify plugins in the project folder?
For example let's say that my app is called my-awesome-aleph if I created a file my-awesome-aleph\plugins.ts with my plugins would that work?

[ije]

postcss.config.(js|ts) could be an option(currently not support):

import plugin from "./your-postcss-plugin.ts"

// import tailwindcss and autoprefixer automaticlly from NPM
export default {
  plugins: [plugin, "tailwindcss", "autoprefixer"]
};

[mojtabakaviani]

Can add this issue to v0.3.0 roadmap? #5

[shadowtime2000]

I think there are already enough things that sill need to be done for v0.3.0, we could try to get it done by then, but I think it would best fit on the roadmap for v0.4.0/future.

[JLarky]

I tried to set up http://twind.dev/ with aleph, but it requires some stuff for it to work in SSR :)

import 'https://cdn.skypack.dev/twind/shim'

works kind of :) since it's client-only (but causes markup to flicker, official solution to set hidden for html tag