Components and tailwindcss

[tersor]

Hello!

First, Bridgetown is awesome! :)

I am trying to use components together with tailwindcss, but this does not work with the postcss config that Bridgetown generates.

To reproduce:

bridgetown new myproject --use-postcss
cd myproject
bundle exec bridgetown configure tailwindcss
touch src/_components/components.scss
sed -i -e '1s/^/@import "components.scss";\n/' frontend/styles/index.css
yarn start

The build fails with [Webpack] Error: Can't resolve 'components.scss' since import statements does not work without the postcss-import plugin.

Fix/workaround:

I have not studied using postcss-preset-env like mentioned in #207 for a possible solution, but I followed Tailwind´s documentation on using with preprocessors:

Install the postcss-import plugin:

npm install -D postcss-import

Update postcss.config.js to the following:

const path = require("path");
const rootDir = path.resolve(__dirname, ".")

module.exports = {
  plugins: [
    require('postcss-import')({
      path: path.resolve(rootDir, "src/_components")
    }),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      features: {
        'nesting-rules': false
      },
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 2
    })
  ]
}

Change to import statements in frontend/styles/index.scss:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "components.scss";
@import "tailwindcss/utilities";

Running yarn start will successfully build the project. I would guess a more permanent approach is to prefer instead of this workaround.

[ayushn21]

Hey @tersor

Thanks for the detailed bug report.

First thing I'd like to point out is that you seem to be using an scss stylesheet in a PostCSS setup. This won't work as there's no Sass processor in PostCSS by default. You'd need to add a Sass PostCSS plugin for that to work.

But the core of the problem as you mention it is the lack of @import directive in the default TailwindCSS setup. I'm not a Tailwind user so please correct me if I'm wrong, but Tailwind encourages the use adding utility style classes in HTML rather than writing custom CSS, right? You can still use Bridgetown components with just the markup and without CSS with the existing Tailwind setup.

If you'd like to add some custom CSS, it's quite easy to add in the PostCSS import plugin and customise your setup. Our aim with the Tailwind bundled configuration is to provide a sensible default starting point. I think it achieves that the way it is at the moment.

If you believe having the postcss-import by default is a good baseline in general, please explain your reasoning and we'd be glad to reconsider!

Thanks!

[tersor]

I'm not a Tailwind user so please correct me if I'm wrong, but Tailwind encourages the use adding utility style classes in HTML rather than writing custom CSS, right?

Yes indeed, you are correct.

If you'd like to add some custom CSS, it's quite easy to add in the PostCSS import plugin and customise your setup. Our aim with the Tailwind bundled configuration is to provide a sensible default starting point. I think it achieves that the way it is at the moment.

I agree, thanks!