Hey @philipp - did you already try modifying your Stylelint rules in package.json as described above?
For me (using VS Code), I believe that that was all I needed to do.
1 Like
Hi @mmirus, yes I did. And I even tried VS Code which shows the same errors. Is there any command after modification to run to compile the settings? Otherwise no idea why this works for you. 
For the moment I’m just adding //noinspection CssInvalidAtRuleto all .scss files where I use Tailwind. But that isn’t the solution…
Thank you!
Can you post the output of some of the errors?
“Error” might be the wrong term but I guess the image is self-explaining. It’s about the point that the IDE recognizes the usage as errors.
Is this an extension you are using for PHPStorm + Stylelint? If not, would Stylelint have anything to do with the issue? Or would this just be a syntax issue in the IDE?
@knowler you’re right. It has nothing to do with Stylint. It’s simply the IDE own “Syntax Inspection”.
However I just disabled the “unknown at-rule” check of PHPStorm for the project as Stylint will also let me know if something isn’t valid here. I guess that will be fine for now.
Thank you!
1 Like
I know a fresh Sage install has Tailwind as an option but this guide needs to be updated.
@tailwind preflight has been changed to @tailwind base
2 Likes
The sage-installer that Sage uses isn’t the version with 1.0.0 yet anyway. It hasn’t been updated since February but the Tailwinds 1.0.0 release for the installer was in March. For now you basically have to manually upgrade.
Sage Installer 1.6.3 should include support for Tailwind CSS 1.0:
Just run composer update roots/sage-installer, then manually run the preset CLI:
php ./vendor/bin/sage preset
5 Likes
Thanks didn’t know you could do it that way. Worked great for a new project and live reloading works and everything (unlike my manually upgraded garbage version).
1 Like
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