Merge pull request #45 from udaypydi/feat/tailwind-css

Feat/tailwind css

Author: udaypydi

.eslintrc.js

@@ -7,6 +7,14 @@ module.exports = {
     'plugin:react/recommended',
     'airbnb',
   ],
+  settings: {
+    "import/resolver": {
+      node: {
+          extensions: ['.js', '.jsx', '.scss', '.css'],
+          moduleDirectory: ['node_modules', 'src/'],
+      },
+    },
+  },
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
 build/
 .gitignore
-coverage/
+coverage/

config/paths.js

@@ -3,6 +3,7 @@ const path = require('path');
 const paths = {
     entry: path.resolve(__dirname, '../index'),
     output: path.resolve(__dirname, '../build'),
+    assets: path.resolve(__dirname, '../src/assets'),
     template: path.resolve(__dirname, './template.html'),
     uielements: path.resolve(__dirname, '../src/uielements'),
 };

config/webpack.base.config.js

@@ -28,7 +28,7 @@ module.exports = function({ plugins }) {
                 },
                 {
                     test: /\.css$/i,
-                    use: ['style-loader', 'css-loader'],
+                    use: ['style-loader', 'css-loader', 'postcss-loader'],
                 },
                 {
                     test: /\.(png|jpe?g|gif)$/i,
@@ -56,6 +56,7 @@ module.exports = function({ plugins }) {
             extensions: ['.js', '.jsx', '.scss', '.css'],
             alias: {
                 uielements: paths.uielements,
+                assets: paths.assets,
             }
         },
     });

index.js

@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import Loader from 'uielements/loader/loader.component';
+
 const App = React.lazy(() => import('./src/app'));
 
 const Index = () => (

package.json

@@ -4,9 +4,12 @@
   "description": "Simple react boilerplate with support for travis ci, webpack, sass etc.",
   "main": "index.js",
   "scripts": {
-    "build": "webpack ---config ./config/webpack.prod.config.js",
-    "dev": "webpack-dev-server --config ./config/webpack.dev.config.js --open",
+    "build": "npm run build:css && webpack ---config ./config/webpack.prod.config.js",
+    "dev": "npm run watch:css && webpack-dev-server --config ./config/webpack.dev.config.js --open",
     "lint": "./node_modules/.bin/eslint --ext .js,.jsx src/",
+    "lint: fix": "./node_modules/.bin/eslint --ext .js,.jsx src/ --fix",
+    "build:css": "postcss src/assets/css/styles.css -o src/assets/css/main.css",
+    "watch:css": "postcss src/assets/css/styles.css -o src/assets/css/main.css",
     "test": "jest --collect-coverage",
     "test:watch": "jest --watch"
   },
@@ -25,9 +28,13 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
+    "autoprefixer": "^9.7.6",
     "babel-loader": "^8.1.0",
+    "postcss-cli": "^7.1.0",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "tailwindcss": "^1.3.4",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11"
   },
@@ -48,6 +55,7 @@
     "jest": "^25.3.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.1",
+    "postcss-loader": "^3.0.0",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "webpack-bundle-analyzer": "^3.6.1",

postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+    plugins: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer'),
+    ],
+};

src/__tests__/__snapshots__/app.spec.js.snap

@@ -1,12 +1,15 @@
 import React from 'react';
+import Button from 'uielements/button/button.component';
 import logo from './logo.png';
+import 'assets/css/main.css';
 import './app.scss';
 
 export default function App() {
   return (
-    <div className="App--Container">
-      <p className="App--Title">Welcome To React Boilerplate!</p>
-      <img src={logo} alt="React Logo" className="App--Image" />
+    <div className="bg-blue-900 flex flex-col justify-center items-center p-20">
+      <p className="text-4xl text-blue-100">Welcom To React Boilerplate!</p>
+      <img src={logo} className="app--image" alt="logo" />
+      <Button buttonText="Get Started!" />
     </div>
   );
 }