Why doesn't tailwindcss work?

[brandoncc]

Hi, and thanks for this awesome tool!

I ran bundle exec bridgetown configure tailwindcss and added class="container mx-auto" to my <main> element. I see the classes in my page html, but there are no tailwind styles applied. What am I missing? I searched my repo for the text "tailwind" and it isn't present. Am I supposed to also go through installation steps from tailwind's site?

Thanks again.

[brandoncc]

If anyone else gets stuck here, I had to:

• yarn add -D tailwindcss
• add the tailwind line to my postcss config:

module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }
  }
}

• and configure tailwind:

module.exports = {
  content: ["./src/**/*.{mdx,md,erb,html,liquid}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

[brandoncc]

You are correct that I put it in the tailwind.config.js file. Sorry it doesn't help, it is weird that the built-in tailwind command doesn't work :-/ It makes me wonder if we are missing something about how we are supposed to be using it.

[jaredcwhite]

Our built-in command doesn't work well with Tailwind v3 which was recently released and features an entirely new method of generating a stylesheet using a JIT compiler.

A fix will be released shortly in the Bridgetown 1.0 beta. Meanwhile this repo might help get you going (on the 0.21 release branch): https://github.com/ParamagicDev/bridgetown-and-tailwind

[btihen]

It seems to me the tailwindcss 3 installer works fine now

[MSchmidt]

When the command asks to overwrite some configs ([Yn]) I had to manuelly enter Y. If not, it didn't do anything.

[ayushn21]

@MSchmidt yeah that's the expected behaviour as of now. There's no default selection, so you have to enter "Y" or "n" to continue. It's not ideal I know, I'll try to find some time to change it soon. Feel free to file an issue if you like :)