Tailwindcss

[lorypelli]

How can I make this work with tailwindcss?

[pharrisee]

it's no different to using tailwind with any other project, although I tend to use the standalone tailwind cli as it means I don't have a dev dependency on node/bun:

https://tailwindcss.com/blog/standalone-cli

there is also a version that includes daisyui that tracks the main tw cli:

https://github.com/dobicinaitis/tailwind-cli-extra

If you need extra tailwind 'plugins' then it would be better to go down the normal tailwind route (i.e. use node/bun with tailwind).

Once I have the tools in place I simply use a taskfile (https://taskfile.dev), but any make type tool will also do the job of synchronising the tools, below I've listed my taskfile for reference:

# https://taskfile.dev
version: '3'

tasks:
  tidy: go mod tidy

  build:
    desc: Build the binary
    deps:
      - tidy
    cmds:
      - go build -o ./tmp/main .

  run:
    desc: Run the binary
    deps:
      - build
    cmds:
      - ./tmp/main

  air:
    desc: Run the air server
    cmds:
      - air

  templ:
    desc: Generate the templates
    cmds:
      - templ generate -watch

  tw:
    desc: Run the TailwindCSS watcher
    cmds:
      - tw -i ./web/src/css/tailwind.css -o ./web/public/css/main.css --watch

  dev:
    deps: [tw,templ,air]

I also use air to reload/rebuild the app on change.

To run the dev environment, I simply task dev and everything gets watched and updated almost in realtime.

[lorypelli]

it's no different to using tailwind with any other project, although I tend to use the standalone tailwind cli as it means I don't have a dev dependency on node/bun:

https://tailwindcss.com/blog/standalone-cli

there is also a version that includes daisyui that tracks the main tw cli:

https://github.com/dobicinaitis/tailwind-cli-extra

If you need extra tailwind 'plugins' then it would be better to go down the normal tailwind route (i.e. use node/bun with tailwind).

Once I have the tools in place I simply use a taskfile (https://taskfile.dev), but any make type tool will also do the job of synchronising the tools, below I've listed my taskfile for reference:

# https://taskfile.dev
version: '3'

tasks:
  tidy: go mod tidy

  build:
    desc: Build the binary
    deps:
      - tidy
    cmds:
      - go build -o ./tmp/main .

  run:
    desc: Run the binary
    deps:
      - build
    cmds:
      - ./tmp/main

  air:
    desc: Run the air server
    cmds:
      - air

  templ:
    desc: Generate the templates
    cmds:
      - templ generate -watch

  tw:
    desc: Run the TailwindCSS watcher
    cmds:
      - tw -i ./web/src/css/tailwind.css -o ./web/public/css/main.css --watch

  dev:
    deps: [tw,templ,air]

I also use air to reload/rebuild the app on change.

To run the dev environment, I simply task dev and everything gets watched and updated almost in realtime.

I use Makefile for my project, but what if instead I use the script tag in html?

[pharrisee]

I use Makefile for my project, but what if instead I use the script tag in html?

I'm no Make expert but other people use make successfully, something along the lines of:

make -j 2 templ watch

Which as far as I understand it should run 2 jobs in parallel. the templ job will watch templ files and recompile to go files, the watch task will watch go files and the jobs will cascade into each other.

The command above is similar to my entry in the task file for dev:

  dev:
    deps: [tw,templ,air]

which runs the 3 jobs in parallel.