added scss, tailwindcss support

next.config.js

@@ -1,7 +1,40 @@
-module.exports = {
+const withSass = require("@zeit/next-sass");
+const tailwindCss = require("tailwindcss");
+
+module.exports = withSass({
   publicRuntimeConfig: {
-    localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
-      ? process.env.LOCALE_SUBPATHS
-      : 'none',
+    localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string' ? 
+      process.env.LOCALE_SUBPATHS : 'none',
   },
-};
+  webpack(config, options) {
+    const rules = [{
+      test: /\.scss$/,
+      use: [{
+        loader: "postcss-loader",
+        options: {
+          ident: "postcss",
+          plugins: [
+            require('tailwindcss'),
+            require('autoprefixer'),
+          ]
+        }
+      },
+      { loader: "sass-loader" }
+      ]
+    }];
+ return {
+    ...config,
+    module: { 
+      ...config.module, 
+      rules: [...config.module.rules, ...rules] 
+    }
+   };
+ }});
+
+// module.exports = {
+//   publicRuntimeConfig: {
+//     localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
+//       ? process.env.LOCALE_SUBPATHS
+//       : 'none',
+//   },
+// };

package.json

@@ -8,9 +8,12 @@
     "start": "NODE_ENV=production node index.js"
   },
   "dependencies": {
+    "@fullhuman/postcss-purgecss": "^2.3.0",
     "@material-ui/core": "^4.4.0",
     "@material-ui/icons": "^4.2.1",
-    "babel-plugin-styled-components": "^1.10.6",
+    "@zeit/next-sass": "^1.0.1",
+    "autoprefixer": "^9.8.4",
+    "babel-plugin-styled-components": "latest",
     "es6-promise": "4.1.1",
     "express": "^4.17.1",
     "immer": "^3.2.0",
@@ -19,6 +22,7 @@
     "next-i18next": "^1.1.2",
     "next-redux-saga": "4.0.0",
     "next-redux-wrapper": "2.0.0",
+    "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "16.9.0",
     "react-dom": "16.9.0",
@@ -27,10 +31,13 @@
     "redux": "4.0.1",
     "redux-saga": "1.0.1",
     "reselect": "^4.0.0",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.3.2",
+    "tailwindcss": "^1.4.6"
   },
   "devDependencies": {
     "babel-plugin-styled-components": "latest",
-    "redux-devtools-extension": "2.13.2"
+    "postcss-preset-env": "^6.7.0",
+    "redux-devtools-extension": "2.13.2",
+    "tailwindcss": "^1.4.6"
   }
 }

pages/_app.js

@@ -9,6 +9,7 @@ import { ThemeProvider } from '@material-ui/styles';
 import Layout from '../components/Layout';
 import theme from '../themes/theme';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import '../styles/sass/style.scss';
 
 class MyApp extends App {
 

pages/index.js

@@ -34,6 +34,7 @@ class Index extends React.Component {
             ] 
           }
         />
+        <h1 className="test">I'm USING TAILWIND!!!</h1>
         <StyledDiv>
           <Typography variant="body1">
             {t('title')}

postcss.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === 'production'
+      ? {
+          '@fullhuman/postcss-purgecss': {
+            content: [
+              './components/**/*.js',
+              './pages/**/*.js'
+            ],
+            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+          }
+        }
+      : {})
+  }
+};

server.js

@@ -2,7 +2,7 @@ const express = require('express');
 const next = require('next');
 const nextI18NextMiddleware = require('next-i18next/middleware').default;
 const nextI18next = require('./i18n');
-const port = process.env.PORT || 3000;
+const port = process.env.PORT || 3100;
 const app = next({ dev: process.env.NODE_ENV !== 'production' });
 const handle = app.getRequestHandler();
 

styles/sass/style.scss

@@ -0,0 +1,24 @@
+	/* purgecss start ignore */
+  @tailwind base;
+  @tailwind components;
+  /* purgecss end ignore */
+
+
+$bg-color: #212121;
+$container-color: #f4f4f4;
+$primary-color: #000000;
+$accent-color: #F68E20;
+
+$h1: 30px; 
+
+body {
+  color: $primary-color;
+  background-color: $bg-color;
+}
+
+.test{
+  font-size: $h1;
+  color: $accent-color;
+}
+
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  purge: ['./components/**/*.js', './pages/**/*.js'],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}