tailwind missing configuration on install

[francispeixoto]

looks like the steps on pages 25-27 ("Adding assets to the build") don't match what tailwind expects.

On build I get the following warning now:

warn - The content option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

The build completes, but a lot of the expected styling is missing:

[francispeixoto]

found the issue, or at least a workaround,

once installed, the following steps need to be taken:

• initiate the tailwind config file: npx tailwindcss init
• point the content section of the config file to the app folder and add the hbs extension:

module.exports = {
    content: ['./app/**/*.{hbs,html,js}'],
};

• add the location of the config file to the postcssOptions of ember-cli-build.js

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    postcssOptions: {
      compile: {
        plugins: [
          // require('tailwindcss'),
          require('tailwindcss')('./app/styles/tailwind.config.js'),
        ],
      },
    },
  });

[francispeixoto]

note: I put the config file in my styles folder, but that's up to the developer. the npx init command puts the file at the root of the project.

[ososkp]

Can I assume you didn't change the .hbs file at all? I'm following along with your fixes and have gotten some styling, but not all:

[francispeixoto]

i didn't touch the template. i kept it exactly the way the book says, so as to not introduce another variable in the problem.

i did notice that the float-right class didn't take effect, but i assumed that maybe tailwind changed it since the books last review. there recently was a major release that could have impacted certain aspects of its use.

[francispeixoto]

according to the docs float-right is still a valid class with the result you'd expect, so I don't know why it's not getting applied in either of our projects...

https://tailwindcss.com/docs/float#floating-elements-to-the-right

[francispeixoto]

looks like text-center doesn't get applied either (page 45)

is there a pattern of problems with alignment?

[balinterdi]

I think most (all?) of the problems are caused by the fact that in your apps, the latest version of Tailwind CSS (3.0.18) is used while the latest version of the book still used 2.2.19.

I've now updated the book to fix the version at 2.2.19 until I'm ready to upgrade to Tailwind CSS. (I checked and everything seems to be in order with 2.2.19).

Sorry about this and all the time you've spent trying to figure this out. (I guess that's what I get for not installing exact versions, or at least not restricting updates to major versions)

[francispeixoto]

I downgraded to 2.2.19 and the css quirks went away:

thanks for the update!

[ososkp]

I'm all good too, thanks for the quick response!

[balinterdi]

@francispeixoto I'll reopen this so that other people see how to fix the problem, and then close it when the next book update is published. Thank you!

[francispeixoto]

no problem!