tailwindlabs / tailwindcss-setup-examples

674 stars 173 forks source link

Add Sails tailwindcss setup example #97

Open DominusKelvin opened 4 years ago

DominusKelvin commented 4 years ago

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

timabell commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

timabell commented 4 years ago

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. :+1:

timabell commented 3 years ago

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