Will withoutwax

Tailwind v3 update for Craft CMS & Laravel Mix

When updating Tailwind to version 3, it caused some issues where just by saving the .twig file didn't show the results directly; with new ability where Tailwind v3 purged unused Tailwind classes, it added an additional step for a developer had to save either .scss file or .js file in order to recompile the assets, thus able to repurge the style sheet so that it displays and updates the newly saved class in .twig file. After doing some research with numerous trial and errors, I realized Laravel Mix v6 allowed saving the .twig file to recompile the assets automatically, thus smoothing out the workflow even better.

Update Guide

Disclaimer - Note that this update guide is specific for upgrading Craft CMS which uses Laravel Mix v5 and Tailwind v2 to Laravel Mix v6 and Tailwind v3.

Updating Tailwind to v3

Working with development branch and merge with master

Sometimes you want to experiment with a code which you have on your master branch but not want to save it to master branch. In this case, you can create another branch where you can experiment with ease - and if you are satisfied, you can merge the experiment to the master branch later.

Creating development branch

git branch development
git checkout development
git add .
git commit -m "Initial commit on development branch"
git push origin development

Creating an API-Only Application with Ruby on Rails

01 - Create a new API-only Rails app

rails new ror-app-name --api

02 - Basic Scaffold

01 - Model

This step is for creating a very basic level of model for us to work in. If you know already, or wish to apply your own custom models with relationships you can skip this step.

Adding Custom Fields to Devise

Before doing anything, please check the versions of the gem files:

gem 'rails', '~> 5.1.4'
gem 'devise', '~> 4.4.0'

Disclaimer - This solution may not work with older versions of rails and devise. Versions listed above were the latest versions of gems which I was using at the time of creation and tests. (10 Jan 2018)

	// Future versions of Hyper may add additional config options,
	// which will not automatically be merged into this file.
	// See https://hyper.is#cfg for all currently supported options.

	module.exports = {
	config: {
	// choose either `'stable'` for receiving highly polished,
	// or `'canary'` for less polished but more frequent updates
	updateChannel: 'stable',

	div {
	-webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	div::after {
	-webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	div:hover {
	color: inherit;

	/* MODULAR CSS */
	/* PADDING */
	.padding-top-10 {padding-top: 10px;}
	.padding-top-20 {padding-top: 20px;}
	.padding-top-30 {padding-top: 30px;}
	.padding-top-40 {padding-top: 40px;}
	.padding-top-50 {padding-top: 50px;}
	.padding-top-60 {padding-top: 60px;}
	.padding-top-70 {padding-top: 70px;}
	.padding-top-80 {padding-top: 80px;}


	<html>

	<head>
	<meta charset="utf-8" />
	<title>The Legend of Dad - Quest for Milk</title>

	<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/21942824/simple-rpg/lib/phaser.min.js"></script>

	<!-- <script type="text/javascript" src="game-functions/social.js"></script>