Tailwind: detecting changes and removing its task

[filipencopav]

Hello. I want to remove tailwind and replace it with bootstrap. Sure, I can just add bootstrap at the top of the page, however I can't remove the tailwind-generating task. When I did (dissoc tasks/tasks "css") in the dev/tasks.clj of the default project, it errors with Unrecognized task: css. So it's still invoking it from somewhere. How can I remove it properly?

Another question is, how does the tailwind binary detect when some of its classes are used in hiccup? How may one go about setting up bootstrap's similar mechanisms to do that too?

Thanks in advance.

[credmp]

Assuming you run the dev task, it is baked into it see.

(defn dev
  "Starts the app locally.

  After running, wait for the `System started` message. Connect your editor to
  nrepl port 7888. Whenever you save a file, Biff will:

   - Evaluate any changed Clojure files
   - Regenerate static HTML and CSS files
   - Run tests"
  [& args]
  (io/make-parents "target/resources/_")
  (when (fs/exists? "package.json")
    (shell "npm" "install"))
  (future-verbose (css "--watch"))
  (spit ".nrepl-port" "7888")
  (apply clojure {:extra-env (merge (secrets) {"BIFF_ENV" "dev"})}
         (concat args (run-args))))

So, the way to change it is to override the dev task. A demonstration of which is in the content library, in the postgres discussion (see the diff here).

[jacobobryant]

Overriding the dev task will work. However there are a few other tasks that also call the css task: uberjar, soft-deploy, deploy. (You can search for run-task "css" in this file to see the usages). Instead of overriding all of those tasks, I would just make a no-op css task:

(defn css
  "No-op"
  [& args]
  nil)

(def custom-tasks
  {"css" #'css
   ...})

(def tasks (merge tasks/tasks custom-tasks))

Another question is, how does the tailwind binary detect when some of its classes are used in hiccup? How may one go about setting up bootstrap's similar mechanisms to do that too?

In the resources/tailwind.config.js file, there's a content option which tells Tailwind where any files that contain tailwind classes will be:

module.exports = {
  content: [
    './src/**/*',
    './resources/**/*',
  ],
  ...

So Tailwind looks at any files under src or resources and uses regexes to find anything that might be a Tailwind class. If you want to do the same kind of unused-CSS-removal with Bootstrap, from a quick search it looks like you can set up PurgeCSS. For example this article mentions this command:

purgecss --css <css file> --content <content file to parse css> --out <output-directory>

If you can fiddle with that command and get something that works, you can have it spit out the results to target/resources/public/css/main.css, then change your no-op css task above to run the PureCSS command.