feat(frontend): add tailwindcss 2 compatibility build for webpack 4

CHANGELOG.md

@@ -7,6 +7,7 @@ Features:
 
 Fixes:
   - Explicitly install project specified node version in CircleCI build [#352](https://github.com/platanus/potassium/pull/352)
+  - Fixes `tailwindCSS@^2` incompatibility with `postcss@^7` [#356](https://github.com/platanus/potassium/pull/356)
 
 ## 6.2.0
 

lib/potassium/recipes/front_end.rb

@@ -69,7 +69,8 @@ def add_responsive_meta_tag
   end
 
   def setup_tailwind
-    run 'bin/yarn add tailwindcss'
+    run "bin/yarn add tailwindcss@#{Potassium::TAILWINDCSS}"
+    specify_autoprefixer_postcss_compatibility_versions
     setup_client_css
     remove_server_css_requires
     setup_tailwind_requirements
@@ -147,6 +148,10 @@ def apollo_loading
     JS
   end
 
+  def specify_autoprefixer_postcss_compatibility_versions
+    run 'bin/yarn add postcss@^7 autoprefixer@^9'
+  end
+
   def setup_client_css
     application_css = 'app/javascript/css/application.css'
     create_file application_css, "", force: true

lib/potassium/version.rb

@@ -7,4 +7,5 @@ module Potassium
   POSTGRES_VERSION = "11.3"
   MYSQL_VERSION = "5.7"
   NODE_VERSION = "12"
+  TAILWINDCSS = "npm:@tailwindcss/postcss7-compat"
 end

spec/features/front_end_spec.rb

@@ -22,6 +22,12 @@
     expect(File).not_to exist(application_css_path)
   end
 
+  def expect_to_have_tailwind_compatibility_build
+    expect(node_modules_file).to include("\"tailwindcss\": \"npm:@tailwindcss/postcss7-compat\"")
+    expect(node_modules_file).to include("\"autoprefixer\": \"^9\"")
+    expect(node_modules_file).to include("\"postcss\": \"^7\"")
+  end
+
   context "with vue" do
     before(:all) do
       remove_project_directory
@@ -55,6 +61,10 @@
       expect(tailwind_config_file).to include('module.exports')
     end
 
+    it 'includes correct packages for tailwind, postcss and autoprefixer compatibility build' do
+      expect_to_have_tailwind_compatibility_build
+    end
+
     context "with graphql" do
       before(:all) do
         remove_project_directory
@@ -84,5 +94,9 @@
     it "creates application_js_file for tailwind without vue" do
       expect(application_js_file).to include("import '../css/application.css';")
     end
+
+    it 'includes correct packages for tailwind, postcss and autoprefixer compatibility build' do
+      expect_to_have_tailwind_compatibility_build
+    end
   end
 end