Tailwind with Aurelia

1

Has anyone tried using it yet? I’m looking to try it out and also use custom properties (probably with PostCSS). I did open an issue a while back but now have a bit of time to look at it.

1 Like
2

Interesting. I haven’t tried this myself, but I imagine that it would fit in well with aurelia/ux

1 Like
3

Too late but

How to configure an Aurelia CLI 1.x application with Tailwind CSS and PurgeCSS?

And Maybe:
PR: Tailwind CSS as a new option in CLI

1 Like
4

I tried using Tailwind CSS with Alameda, SASS pre-processor, and basic PostCSS [*]. It worked almost out-of-the-box. After requiring tailwindcss and adding tailwindcss() to aurelia_project/tasks/process-css.ts, I simply needed to require app.css from my app.html and put @tailwind() directives inside my app.scss.

[*] FYI I created my project with aurelia new feathers-plus-web --unattended --select cli-bundler,alameda,typescript,htmlmin-max,sass,postcss-basic,jest,cypress,vscode --install-deps yarn

1 Like
5

Great :slight_smile:

I tried using Tailwind CSS with Alameda, SASS pre-processor, and basic PostCSS [*]. It worked almost out-of-the-box. After requiring tailwindcss and adding tailwindcss() to aurelia_project/tasks/process-css.ts, I simply needed to require app.css from my app.html and put @tailwind() directives inside my app.scss.

Yes, I know, This should work via my PR too. :wink:
I added TailwindCSS to CLI.

I created my project with aurelia new feathers-plus-web --unattended --select cli-bundler,alameda,typescript,htmlmin-max,sass,postcss-basic,jest,cypress,vscode --install-deps yarn

Did you ever try PurgeCSS with TailwindCSS?
We had some problems in PR so we decided to remove PurgeCSS.

PurgeCSS does not work with Gulp 4+ and TailwindCSS 1+
Error: EACCES: permission denied (MacOS only)

1 Like
6

No I haven’t tried PurgeCSS with Tailwind.
Is PurgeCSS part of the current CLI? If so, I can give it a try.

1 Like
7

Is PurgeCSS part of the current CLI?

No it is not. It was in my PR. PurgeCSS is so useful for CSS treeshaking. I explained how to enable it in my Medium post.

If so, I can give it a try.

I can create a different version of Aurelia CLI with Tailwind and PurgeCSS option.

1 Like
8

OK here’s what I did:

Install with yarn add -D @fullhuman/postcss-purgecss
Add the plugin calls to aurelia_project/tasks/process-css.ts:

// ...
import * as postcss from 'gulp-postcss';
import * as autoprefixer from 'autoprefixer';
import * as tailwindcss from 'tailwindcss';
import * as purgecss from '@fullhuman/postcss-purgecss';
// ...
    .pipe(postcss([
      tailwindcss(),
      purgecss({
        content: [
          'index.html',
          'src/**/*.html'
        ]
      }),
      autoprefixer()
    ]))
    .pipe(build.bundle());
// ...

Without purgecss, my app-bundle.js (which includes the css file) is 587K.
With purgecss, it is reduced to 66K.

At first, I forgot to include index.html (which is not inside src), so it purged the CSS rules for <html> and <body> tags from tailwind. After I added that in, I no longer observed styling changes when building with and without purgecss.

EDIT: when I add a few tailwind classes into some of my views, these classes start popping up next time process-css runs too.

2 Likes
9

Thanks,
May I ask you to check this too?
Tailwind & Gulp

This is not an Aurelia project just Gulp, TailwindCSS and PurgeCSS but does not work for me! :thinking::expressionless::neutral_face:

1 Like
10

I don’t know if this contributes in anyway, but I’ve used tailwindcss and purgecss with aurelia cli (Alameda.js / Gulp.js)

Project repo

Packages used:

  1. tailwindcss
  2. gulp-purgecss

Steps I took:

  1. npx tailwind init --full
  2. Edit process-css
import { CLIOptions, build } from "aurelia-cli"
...
import tailwindcss from "tailwindcss"
import purgecss from "gulp-purgecss"
import through2 from "through2"
...


...
    .pipe(postcss([
      tailwindcss("tailwind.config.js"),
      ...
    ]))
    .pipe((CLIOptions.getEnvironment() === "prod")
      ? purgecss({
        content: project.markupProcessor.source,
        css: project.cssProcessor.source,
        extractors: [
          {
            extractor: class TailwindExtractor {
              static extract (content) {
                return content.match(/[A-Za-z0-9-_:/]+/g) || []
              }
            },
            extensions: [ "css", "html" ],
          },
        ],
      })
      : through2.obj()
    )
    .pipe(build.bundle())
}
  1. Edit aurelia.json
...
  "cssProcessor": {
    "source": [
      "src/**/*.{css,scss}"
    ]
  },
...
1 Like
11

Glad to see this here, I will hopefully be starting a project with Aurelia and Tailwind shortly.

1 Like
12

Tailwindcss has a nice section how to use/configure purgecss with tailwind. For a few external libraries I’m using the whitelist option in purgecss to exclude them.

1 Like