This upgrades the Wilson Starterkit Theme to use Tailwind 3.0, with the new Just In Time engine. This required some small changes to the npm run scripts. I used this opportunity to refactor some parts of the CSS to use newer features of Tailwind (& Tailwind Children) and slightly reduce CSS in separate files.
Examples:-
Arbitrary utility valuesw-[80vw] = width: 80vw;
Descendent selectorsdescendant-nav:justify-center =
:where(.descendant-nav\:justify-center) nav:where(:not(.not-descendant-nav)){ justify-content:center }
i.e. set the value of justify-content for any <nav> elements inside the container with this Tailwind class.
Tailwind 3.0 switches from a purge model to a just in time model. Powered by Postcss, Tailwind will scan the template files and scripts and generate a CSS file based on the classes that are actually being used. While developing the theme, you'll need to run npm run dev to watch for changes in the relevant file paths and trigger a build. If you wish to use a Tailwind CSS class via the database (and not in a template) you must include it in the safelist in tailwind.config.js or it won't be included in the final built CSS.
This PR also includes a cheeky composer dependency on Drush, as it's annoying that it's not there where spinning up a new project.
This upgrades the Wilson Starterkit Theme to use Tailwind 3.0, with the new Just In Time engine. This required some small changes to the npm run scripts. I used this opportunity to refactor some parts of the CSS to use newer features of Tailwind (& Tailwind Children) and slightly reduce CSS in separate files.
Examples:-
Arbitrary utility values
w-[80vw]=width: 80vw;Descendent selectors
descendant-nav:justify-center=:where(.descendant-nav\:justify-center) nav:where(:not(.not-descendant-nav)){ justify-content:center }i.e. set the value of justify-content for any<nav>elements inside the container with this Tailwind class.Tailwind 3.0 switches from a purge model to a just in time model. Powered by Postcss, Tailwind will scan the template files and scripts and generate a CSS file based on the classes that are actually being used. While developing the theme, you'll need to run
npm run devto watch for changes in the relevant file paths and trigger a build. If you wish to use a Tailwind CSS class via the database (and not in a template) you must include it in thesafelistintailwind.config.jsor it won't be included in the final built CSS.This PR also includes a cheeky composer dependency on Drush, as it's annoying that it's not there where spinning up a new project.