Does anyone know how to properly setup the latest version fo Tailwind 1.9.5 with Sage 9?
What problems are you running into?
Is it possible to get Browsersync working with Tailwind so updates happen when a blade file is updated?
I got things working after updating a lot of packages on my machine, node, valet, etc.
I just did a fresh yarn install with tailwind framework (added from the installer). Yarn build does not work:
Module build failed: ModuleBuildError: Module build failed: TypeError: addBase is not a function
at globalStyles (/Users/xxxx/xxxx/web/app/themes/sage/resources/assets/styles/tailwind.config.js:17:3)
I’m new to tailwind, so any help is appreciated.
Edit: I did a few things before getting the above error, can’t exactly see what I might have done wrong. I did another clean install, this time first thing I did was run yarn && yarn build, resulting in this error:
Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap? }
at validate (/Users/xxxxxx/web/app/themes/sage/node_modules/schema-utils/dist/validate.js:104:11)
Another error is thrown by eslint, it thinks line 5 from the main.js file has a semicolon too many. Removing the semicolon after the jquery import or after the autoload import, or adding an eslint comment fixes it. Never seen this error before in over 30 sage installs. The semicolon is correct, the thrown error is not, so I’m wondering why this happens.
Edit: the semicolon is automatically added on save by the prettier plugin.
// import external dependencies
import 'jquery';
// Import everything from autoload
import './autoload/**/*'; /* eslint-disable-line */
Greetings. First, thanks for this guide.
It works great for all of tailwinds options, but not when I add a custom one. For example, I extend the colors in tailwind.config.js, and the editor ( I use vs code ) can now “see” my new options, but when I build the app, the new colors don’t get rendered.
Any ideas what might be the issue? Thanks.
It seems to me now, that the issue comes from using multiple config and postcss.config files, due to the intention of having vue inside sage but as a separate build - that is, to be able to also run vue cli service and work solely on the components.vue that later are imported in sage.
The obvious solution is to play with webpack and use multiple configs.
You may find sage9 + webpack5 + tailwind 2 interesting:
1 Like
@strarsis : I have used your repo to setup a new Sage9-based project, and the file main.css is not hashed as you can see in the attached screenshot. Is there any custom configuration on webpack that I have to make?
The latest Sage 9.x got these updates merged - [including Tailwind 2 compatibility]
(sage-installer/Tailwind.php at master · roots/sage-installer · GitHub).
It also includes more updates that came afterwards and probably also fix your issue.
So try out the latest Sage 9.x release from upstream:
1 Like