NativeScript/tailwind

Tailwind v1.2

marcomelilli opened this issue · 8 comments

marcomelilli commented

Is it possible upgrade the plugin to the latest tailwindcss version? 😄
https://tailwindcss.com/docs/release-notes#tailwind-css-v1-2

Thanks!

austriker27 commented

Yes please. There's a ton of new great stuff in TW 1.2 so I would love this plugin to be updated.

rigor789 commented

If you are building with option 3. as a postcss plugin, you can just update Tailwind in your project, and it should be built just fine.

For the included css in dist - I'd ideally want to automate the process with a github action + dependabot.

In the meantime - PR is welcome.

  • 👍1
austriker27 commented

Sorry, but how exactly do you use/include postcss in nativescript?

rigor789 commented

@austriker27 https://github.com/postcss/postcss#webpack covers how to install postcss in a webpack project (like nativescript apps)

tl;dr

npm i --save-dev postcss-loader

Add the loader to the css rules in webpack.config.js
Follow https://tailwindcss.com/docs/installation/ for installing tailwind
and then in the postcss config add require('nativescript-tailwind') after the tailwind plugin.

// postcss.config.js

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('nativescript-tailwind'),
    // ...
  ]
}
  • ❤️1
austriker27 commented

@austriker27 https://github.com/postcss/postcss#webpack covers how to install postcss in a webpack project (like nativescript apps)

tl;dr

npm i --save-dev postcss-loader

Add the loader to the css rules in webpack.config.js
Follow https://tailwindcss.com/docs/installation/ for installing tailwind
and then in the postcss config add require('nativescript-tailwind') after the tailwind plugin.

// postcss.config.js

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('nativescript-tailwind'),
    // ...
  ]
}

Ohhhhh sorry, I didnt recognize that nativescript is basically just running webpack! Thanks a lot!

rigor789 commented

@austriker27 no worries - hopefully you got it up and running!

rigor789 commented

Released 1.3.0 with latest tailwind.

Works with the new purge option, and the new utilities as well!

rigor789 commented

@austriker27 I'm not sure if you've got it running - but I've just released a demo app with some of the new features of tailwind. It uses postCSS to build tailwind, and have added all the steps I used to set it up in the README.

https://github.com/rigor789/demo-nativescript-vue-tailwind

  • 👍1