Docker and Tailwindcss

Get Help and Help Others
1

Any suggestions on getting the Docker experimental working with tailwindcss?

My app (rw 7.6.3) works with the production compose (both on Mac and ubuntu server) but does not work with dev compose.

With web/config/postcss.config.js (from yarn rw setup ui tailwindcss)

const path = require('path')

module.exports = {
  plugins: [
    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
    require('autoprefixer'),
  ],
}

docker compose -f ./docker-compose.dev.yml up — fails
docker compose -f ./docker-compose.prod.yml up — works

if i comment out the two require lines, dev docker works (with no tailwind).
note: yarn rw dev directly works

2

Hey @raj! I’ve tried to reproduce this locally but both work for me.

The steps I went through were:

  1. Created a new project with yarn create redwood-app
  2. Setup tailwind with yarn rw setup ui tailwindcss
  3. Added a home page with yarn rw g page home /
  4. Added some divs and such with tailwind classes to that homepage
  5. Setup docker with yarn rw exp setup-docker

I was able to run both:

docker compose -f ./docker-compose.dev.yml up
docker compose -f ./docker-compose.prod.yml up

and see the tailwind styled content on the homepage.

I also tried replacing my web/config/postcss.config.js with the content you listed here and it worked too.

I’ll try to think of anything else but nothing right now comes to mind as to what to check.

3

Thanks for the update.

I have retried with a new rw project and followed your steps with no problems.

One difference is the new project is rw version 7.7.1 . But I don’t believe the previous version was my problem. I think it must have been some sequence of steps I was taken.

2 Likes
4

Awesome if you’re unblocked! Always great to hear where things are a little weird so we can try to shore up the flow and make it less likely to end up in these weird states

1 Like