Update Tailwind to 1.0.0

[knowler]

I’ve begun updating the Tailwind stubs for its 1.0.0 release based on the draft upgrade guide.

TODO:

• Explicitly set heading default styles
• Explicitly set list default styles
• Use addBase for setting base styles (e.g. heading sizes)

[brandontamm]

You're probably already on it, but FYI Tailwind v1.0 is coming out of beta tomorrow or Monday. I'm currently on an old version and want to use this updated version. Any way I can git clone Sage with the 1.0.0 beta or add your branch with 1.0.0 as a dependency to my project to update the codebase? Per Adam, no major changes from 1.0.0-beta..

[knowler]

UPDATE: the following are not upgrade instructions for Tailwind 1.0 in Sage. They are instructions for testing out this PR on presumably a fresh install of Sage. Proceed at your own risk.

@brandontamm Set this in your composer.json:

"require-dev": {
  "roots/sage-installer": "dev-tailwind-1.0.0"
}

Then run:

# Updates Sage installer
$ composer update --dev roots/sage-installer

# Select Tailwind
$ ./vendor/bin/sage preset

I might be able to get around to finishing this PR, but I can’t promise we’ll get it into Sage 9 anytime soon. We’ve been moving our focus to Sage 10 which uses Laravel Mix, so Tailwind support will be 100% easier.

If you do find anything that needs to be changed, let us know or make a PR targeting this branch.

[knowler]

Re-running the preset will replace everything in here (the styles only if you tell it to). So you might want to make a backup of those files if you don’t already have them committed.

[brandontamm]

I guess I do have one error upon when running yarn commands...

ERROR in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"config":{"path":"/Users/btamm/Sites/begreatsports/begreatsports/themes/resources/assets/build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"/Users/btamm/Sites/begreatsports/begreatsports/themes","assets":"/Users/btamm/Sites/begreatsports/begreatsports/themes/resources/assets","dist":"/Users/btamm/Sites/begreatsports/begreatsports/themes/dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"/var/www/html/web/app/themes/begreatsports/dist/","devUrl":"http://begreatsports.local","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":false,"plugins":[{"version":"6.0.23","plugins":[null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.23"},null]}!./node_modules/resolve-url-loader?{"sourceMap":false,"silent":true,"absolute":false,"fail":false,"keepQuery":false,"attempts":0,"debug":false,"root":null,"includeRoot":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss
Module build failed: Syntax Error

(34:3) @apply cannot be used with .text-primary because .text-primary either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-primary exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

32 | /* line 14, resources/assets/styles/common/_global.scss */
33 | a {

34 | @apply text-primary no-underline border-b border-transparent;
| ^
35 | transition: 0.2s ease; }
36 | /* line 19, resources/assets/styles/common/_global.scss */

[brandontamm]

Looks like that particular error is just a result of the v1 change to the tailwind config... I found an error though prior to that when I run yarn command:

warning " > stylelint-webpack-plugin@0.10.5" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".

multiple errors later on ..

[brandontamm]

To rule out any issues that may have arose from my custom environment .. I spun up a vanilla environment, downloaded vanilla sage theme v9.0.9 and ran the commands you listed above..I still got the same errors and I believe there are dependency issues related to the stylelint-webpack-plugin...

Were you able to successfully upgrade to v1.0.0 using your commands on vanilla sage v9.0.9?

Here is the full terminal output in a pastebin - https://pastebin.com/5bmDQk4Z

[brandontamm]

And one more time for good measure :) - https://pastebin.com/wsjvAi4a

[knowler]

@brandontamm I guess I hadn’t bumped the Tailwind version in package.json since I was waiting until it was closer to release. A good chunk of the errors you were experiencing was because of that. Now I have the package version set to 1.0.0 which might not work, but at least NPM/Yarn should prompt you to install an available version. I also fixed all the colours and I made a plugin which accounts for the global styles (uses theme values to override Tailwind’s base styles — I think that’s pretty great).

As far as I’m concerned, this is ready for review/merge once Tailwind 1.0.0 releases.

[brandontamm]

Excellent! I noticed the commits and was kind of learning along with you when you were adding to the configuration and plugin. I really like the revamp on the config and plugins! Brandon Tamm Sent from Mobile

…

On May 10, 2019, at 2:31 AM, Nathan Knowler ***@***.***> wrote: @brandontamm I guess I hadn’t bumped the Tailwind version in package.json since I was waiting until it was closer to release. A good chunk of the errors you were experiencing was because of that. Now I have the package version set to 1.0.0 which might not work, but at least NPM/Yarn should prompt you to install an available version. I also fixed all the colours and I made a plugin which accounts for the global styles (uses theme values to override Tailwind’s base styles — I think that’s pretty great). As far as I’m concerned, this is ready for review/merge once Tailwind 1.0.0 releases. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[brandontamm]

Still getting all the errors on a vanilla Sage installation. I was able to select v1.0.0-beta8

[brandontamm]

https://pastebin.com/Wag5G31R

[knowler]

Does node-sass work on other projects? This doesn't look like an issue with anything I've done Tailwind related.

[knowler]

Tailwind 1.0.0 is released now. I ran a test with the official release and everything is running fine.

[brandontamm]

Can you share the dependency versions you are using for sage? I am using:

• npm v12.1.0
• yarn 1.16.0
• webpack 4.31.0

[knowler]

@brandontamm Can you move your issue over to our discourse — it’s not related to Tailwind 1.0.0 being implemented into Sage. I am using the latest Node LTS release (10.15.3) as installed with NVM. See our getting started documentation to properly set up your development environment to use Sage. Also it looks like you are using an unsupported version of webpack with Sage 9.