TailwindCSS 2.2 (with Config & TailwindUI & PurgeCSS)

Public

A utility-first CSS framework for rapid UI development. (based off rodreegez template based off Mark Mead's template based off Benjamin Darcet's template)

Used 508 times

• Created by

A Alex Ventura

Usage

TailwindCSS v2.0 is now using PostCSS 8 but webpacker is not ready to use it, so, after installing TailwindCSS 2 we get some compatibility issues with PostCSS 8 and webpacker. the console error basically shows this up:

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/alex/Workspace/virtualfood/node_modules/postcss/lib/postcss.js:55:10)
    at /Users/alex/Workspace/virtualfood/node_modules/postcss-loader/src/index.js:140:12
 @ ./app/javascript/stylesheets/application.scss 2:26-228
 @ ./app/javascript/packs/application.js

Because of the not full compatibility with PostCSS 8, Tailwind team has developed a special package that uses the PostCSS 7 to compile TailwindCSS v2.0, this are the resources explaining this error:

So basically the solution in this template was to use the `@tailwindcss/postcss7-compat` instead of the normal `tailwindcss` package.
To configure TailwindCSS/UI we use the different plugins `@tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio`.

Run this command in your Rails app directory in the terminal:

rails app:template LOCATION="https://railsbytes.com/script/XbBsG6"

Template Source

Review the code before running this template on your machine.

#run "yarn add tailwindcss"
run "yarn add tailwindcss@yarn:@tailwindcss/postcss7-compat"
run "yarn add @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio"

run "mkdir app/javascript/stylesheets"
run "touch app/javascript/stylesheets/application.scss"

inject_into_file "app/javascript/stylesheets/application.scss" do <<~EOF
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
  EOF
end

run "npx tailwindcss init"

inject_into_file 'app/javascript/packs/application.js', after: 'import "channels"' do <<~EOF

  import "stylesheets/application.scss"
  EOF
end

inject_into_file 'postcss.config.js', before: "require('postcss-import')" do <<~EOF
  require('tailwindcss'),
  require('autoprefixer'),
  EOF
end

gsub_file "tailwind.config.js", /purge:\s\[\],/, <<-PURGE
  purge: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/components/**/*.html.erb',
    './app/components/**/*.rb',
    './app/javascript/**/*.js',
  ],
PURGE

gsub_file "tailwind.config.js", /plugins:\s\[\],/, <<-PLUGINS
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
PLUGINS

inject_into_file "app/views/layouts/application.html.erb", before: "<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>" do <<~EOF
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  EOF
end

Comments

Enoch Tamulonis

This code will make overriding tailwindcss not work!

instead of

inject_into_file 'postcss.config.js', before: "require('postcss-import')" do <<~EOF
  require('tailwindcss'),
  require('autoprefixer'),
  EOF
end

It should require tailwindcss and include the path to the tailwindcss post config js

inject_into_file 'postcss.config.js', before: "require('postcss-import')" do <<~EOF
  require('tailwindcss')("link_to/tailwind.config.js"),
  require('autoprefixer'),
  EOF
end

Enoch Tamulonis

This was causing me some problems which I was very confused on for a while this turned out to be why

Alex Ventura

☒ Thanks for your comment but I'm not sure why you get that error, I think you moved the `

tailwind.config.js` to another location than the root path of you Rails application, that's why you need to provide the location of the Tailwind config file, otherwise this script works as it is without any further moditication.

I just create a brand new Rails app and use this template and it all worked for me like a charm.

Enoch Tamulonis

☒ You are correct I moved the tailwind.config.js to my javascript/stylesheets folder to be more organized which required me to write the explicit path