Skip to content

Instantly share code, notes, and snippets.

@ariona
Created Oct 21, 2020
Embed
What would you like to do?
Frontend Dev starter for non JS Framework

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
{
"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"
}
}
module.exports = {
plugins: [
require('postcss-import'),
require('precss'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano'),
]
}
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
layers: ['utilities'],
content: [
'./**/*.html',
'./**/*.php',
'./**/*.blade',
],
},
theme: {},
variants: {},
plugins: [],
}
/* place this file in source folder */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./bsm"; /* this import your custom style */
@import "tailwindcss/utilities";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment