Upgrade to Tailwind 2.0 🎉

[simonswiss]

Heyoo 👋

Simon from Tailwind Labs here.

This morning I was helping a Sage 9 user to get their project working with Tailwind 2.0, and I thought I could open a PR here reproducing the same steps I had to go through to make my test project work with a brand new Sage 9 project created via composer.

This also fixes a PostCSS error that happens with both Tailwind v1 and v2 (deprecated webpack postcss options config object).

I'll add a few comments in the PR, but not much has changed 👍

[christiaansnoei]

Whenever I follow this guide, my css won't render how it should;

@tailwind base;@tailwind components;.btn{@apply bg-primary rounded my-3 px-4 py-3 text-white leading-none;transition:.2s ease}.comment-list{@apply list-none p-0}.comment-list ol{list-style:none}.comment-form p{@apply mb-4}.comment-form input[type=email],.comment-form input[type=text],.comment-form input[type=url],.comment-form textarea{@apply block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-700 border border-gray-500 rounded}.comment-form input[type=email]:focus,.comment-form input[type=text]:focus,.comment-form input[type=url]:focus,.comment-form textarea:focus{@apply ring}.comment-form input[type=submit]{@apply btn bg-gray-600}.comment-form input[type=submit]:hover{@apply bg-gray-700}.search-form{@apply flex items-center}.search-form label{@apply mb-4;font-weight:400}.search-form .search-field{@apply block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-500 rounded}.search-form .search-submit{@apply inline-block align-middle text-center select-none border font-normal whitespace-nowrap py-2 px-4 rounded text-base leading-normal no-underline text-gray-100 bg-gray-500}.search-form .search-submit:hover{@apply bg-gray-400}.alignnone{margin-left:0;margin-right:0;max-width:100%;height:auto}.aligncenter{@apply my-2 mx-auto;display:block;height:auto}.alignleft,.alignright{@apply mb-4;height:auto}@screen sm{.alignleft{@apply mr-4;float:left}.alignright{@apply ml-4;float:right}}.wp-caption{@apply inline-block mb-4}.wp-caption img{@apply mb-2 leading-none max-w-full h-auto}.wp-caption-text{font-size:90%;color:#6c757d}.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-reader-text:active,.screen-reader-text:focus,.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.banner .nav{@apply list-none p-0 flex flex-wrap}.banner .nav a{@apply inline-block px-4 py-2 border-none}.banner .nav a:hover{color:#19217c}body#tinymce{margin:12px!important}@tailwind utilities

For example '@tailwind base;' wont echo the classes generated by TW. Any suggestions?

[knowler]

Hey @christiaansnoei. This isn’t a guide, this is a pull request. What guide are you referring to? If you can ask your question wherever the guide was (I presume Roots Discourse or maybe the TailwindCSS Discussion related to this), that would help us help you since we will have the full context for your question and we can answer you in the right channel. Thank you for reporting this!

I do have a follow-up PR in this repo which adds postcss v8 and autoprefixer v10 to the devDependencies since they are both peerDependencies of Tailwind, but it sounds like your issue is different. There’s just a hold up since we need to figure out versioning stuff over in the Sage repo since technically all of this forces Sage 9 to require a different minimum for Node. Hopefully, I can get to that all soon.