Add tailwindcss - Githubissues

cds-snc / node-starter-app

Quick start application setup.... because you have to start somewhere.

MIT License

5 stars 3 forks source link

Add tailwindcss #121

Closed dsamojlenko closed 4 years ago

dsamojlenko commented 4 years ago

Adds Tailwindcss and PostCSS
Moves SASS compilation from middleware to Webpack
Maintains the original SASS stylesheets and uses SASS to import Tailwindcss
Includes PurgeCSS to reduce css file size by stripping out unused css on production builds

TODO

some base styles (~~default font face~~ and some heading styles for sure) have been affected by Tailwind and we should do more testing to see if there are other collisions
would like to convert some (all?) of the component styles to tailwind extracts - but that could be done over time
~~changed the webpack output path, so the jsFiles functionality is currently broken~~
there is a bug on first run (ie, when there is no public/dist folder) - nodemon seems to get caught in a loop continually restarting after detecting changes. This doesn't happen if you stop and re-start.

timarney commented 4 years ago

@dsamojlenko

We should be able to adjust this line - for the new entry path.

https://github.com/cds-snc/node-starter-app/blob/16d08f3ae8bb9b00d06ac642c8654933b42c8db9/utils/url.helpers.js#L30

That path is used here: https://github.com/cds-snc/node-starter-app/blob/16d08f3ae8bb9b00d06ac642c8654933b42c8db9/utils/load.helpers.js#L8

Given that call is wrapped we should be fine and we're controlling that path export this shouldn't be a breaking change (for the getClientJS call).

timarney commented 4 years ago

there is a bug on first run (ie, when there is no public/dist folder) - nodemon seems to get caught in a loop continually restarting after detecting changes. This doesn't happen if you stop and re-start.

See: https://github.com/cds-snc/node-starter-app/issues/116

timarney commented 4 years ago

This is looking good. Need to do sweep for styling diffs as you mentioned.

I can see about moving the Webpack stuff up to the other starter tomorrow.

Also up for discussion but on the PSPC demo I hooked up https://www.browsersync.io which was a decent way to do page browser refreshes (watching the css dir etc... on a delay). This can remain a manual process but I like having it automated personally. We can push that to later if you like the idea.

I can see about moving the Webpack stuff up a level tomorrow + publishing the changes.

As part of this PR well also need to update the Changelog etc...

timarney commented 4 years ago

@dsamojlenko

I moved the CSS loaders etc... up to the Webpack starter and updated the Changelog and bumped the package to 6.0.0.

1) If you can verify the updated Webpack config is working as expected 2) Ensure the Changelog is accurate so anyone trying to pull in updates know what are breaking changes.

dsamojlenko commented 4 years ago

I made made some changes to the changelog. Tested and everything works as expected.

timarney commented 4 years ago

Looking pretty close for the styling.

I think to close that out we just need to adjust the header size to be a little smaller. "Demo" version on the right in the screen shot.

timarney commented 4 years ago

Thinking we should add at a minimum some theme colours for use by tailwind.

https://tailwindcss.com/docs/theme/

extend: {
      colors: {
        cyan: '#9cdbff',
      },

Ideally we could drive the SASS variables from there as well but fine with some duplication for now.