tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Brunch with Postcss integration demo #161

Open jakehopking opened 5 years ago

jakehopking commented 5 years ago

Hi there

I've spent about an hour trying to add this into my new test project. Is there an example project I can clone and learn from? If not, then it would be super great to create. I'd really love to give Tailwind a whirl!

Otherwise, for my brunch build I will bid thee adieu. I'll try on a larger webpack project in when I get the dev time.

adamwathan commented 5 years ago

Haven't used Brunch myself but looks like you would need to install this Brunch plugin:

https://github.com/brunch/postcss-brunch

...then add Tailwind to your Brunch config:

plugins: {
  postcss: {
    processors: [
      require('tailwindcss')('./tailwind.js'),
    ]
  }
}
jakehopking commented 5 years ago

Thanks for replying to my issue. Sadly I've tried this already, along with numerous iterations, but to no avail. I think I'll have to give up, it's not worth persevering with.

Brunch sees the config file and certainly pipes the SCSS through to Postcss, but it simply injects the Tailwind directives (e.g: @tailwind: preflight;) opposed to actually injecting the Tailwind CSS.

adamwathan commented 5 years ago

Just pulled down the bare bones starter template from brunch.io and set it up with Tailwind, here's the repo:

https://github.com/adamwathan/brunch-tailwind

I tried getting it working with Sass but you're right, it doesn't. I can't even get Autoprefixer working, and it sort of looks like sass-brunch just doesn't work with any PostCSS stuff at all:

https://github.com/brunch/sass-brunch/issues/124 https://github.com/brunch/brunch/issues/1619 https://github.com/brunch/postcss-brunch/pull/33

If you don't have to use Sass, I'd recommend dropping it and going to just PostCSS and using postcss-preset-env to get things like nesting.

jakehopking commented 5 years ago

Thanks for trying. Your replication of my failed attempt is bittersweet :/ I'd like to give postcss a dive, but I'm currently too heavily invested in my own scss framework at this pont to make the necessary transition.

I've found a Tailwind scss port https://github.com/fractaledmind/sasswind which this evening I modified to reference my own framework's vars. Looking forward to testing it out on my current project.