Frontend Dev starter for non JS Framework

readme.md

This is frontend development kickstarter for Slicing Project, no js framework (vue, react). The project use postCSS, tailwind. Thanks to precss you can use SCSS markup style.

Starting Development

Run dev will start browser-sync server with auto reload when page/style change

yarn dev
//or
npm run dev

Build

Building will purge tailwind style based on html/php files.

yarn build
//or
npm run build

package.json

{
  "name": "mandiri-syariah",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "concurrently 'browser-sync start --server --watch' 'postcss ./source/tailwind.css -o ./assets/css/style.css -w'",
    "build": "NODE_ENV=production postcss ./source/tailwind.css -o ./assets/css/style.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "browser-sync": "^2.26.13",
    "concurrently": "^5.3.0",
    "cssnano": "^4.1.10",
    "postcss": "^8.1.1",
    "postcss-cli": "^8.1.0",
    "precss": "^4.0.0"
  },
  "dependencies": {
    "postcss-import": "^12.0.1",
    "tailwindcss": "^1.9.4"
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('precss'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano'),
  ]
}

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    layers: ['utilities'],
    content: [
      './**/*.html',
      './**/*.php',
      './**/*.blade',
    ],
  },
  theme: {},
  variants: {},
  plugins: [],
}

tailwind.css

/* place this file in source folder */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./bsm"; /* this import your custom style */
@import "tailwindcss/utilities";