Skip to content
This repository has been archived by the owner on May 8, 2021. It is now read-only.

Add Sails tailwindcss setup example #97

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

DominusKelvin
Copy link

Here is a minimal setup needed to get Tailwind up and running in a Sails.js application.

@timabell
Copy link

timabell commented Nov 21, 2020

This fires up for me okay but I notice when replicating it as per the supplied readme that my sails new mentions much newer versions in .sailsrc

  "_generatedWith": {
    "sails": "1.4.0",
    "sails-generate": "2.0.0"
  }

vs

    "sails": "1.2.4",
    "sails-generate": "1.17.2"

it might be worth updating this PR with the latest sails.

@timabell
Copy link

timabell commented Nov 21, 2020

Running my own attempt at replicating these steps resulted in this error

$ sails lift
...
debug: :: Sat Nov 21 2020 01:20:15 GMT+0000 (Greenwich Mean Time)                                                             
                                                                                                                              
debug: Environment : development                                                                                              
debug: Port        : 1337                                                                                                     
debug: -------------------------------------------------------                                                                
error:                                                                                                                        
------------------------------------------------------------------------                                                      
Fatal error: [object Object] is not a PostCSS plugin                                                                          
Running "postcss:dist" (postcss) task                                                                                         
------------------------------------------------------------------------                                                      

error: Looks like a Grunt error occurred--
error: Please fix it, then **restart Sails** to resume watching for changes to assets:
...

I diffed what I'd created with this example and couldn't spot the source of the problem.

Thanks for sharing the example.

@timabell
Copy link

timabell commented Nov 21, 2020

Okay, it's working now thanks to https://stackoverflow.com/questions/40090111/postcss-error-object-object-is-not-a-postcss-plugin/64346190#64346190 for the tip to add postcss directly.

On another project it failed because I didn't have autoprefixer installed, so probably best to add that too.

So, I think that in the readme added in this PR this line:

npm i --save-dev tailwindcss grunt-postcss

needs to read:

npm install --save-dev tailwindcss grunt-postcss postcss autoprefixer

@DominusKelvin
Copy link
Author

Thanks, @timabell for taking the time to do this. I am reviewing now and will update accordingly.

@timabell
Copy link

No problem @DominusKelvin

I had one other problem, this line filtered out all my existing assets when I applied it to another project

          src: ["!(tailwindcss)/**/*.!(coffee|less)"],

so I changed it back again for now, I haven't got to the bottom of the issue but thought it worth raising now if you're looking at it. 👍

@timabell
Copy link

timabell commented Nov 26, 2020

Okay, to solve the regex problem and reduce complexity I moved assets/styles/tailwindcss/tailwind.css to postcss/tailwind.css and chnaged the source directory in tasks/config/postcss.js to match.

This makes the sequence of build steps a little less entangled.

Patch for my minimal example

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants