JG johnnyicon

Tailwind CSS best practices

When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

NOTE: This post now lives (and kept up to date) on my blog: http://hakunin.com/rails3-load-paths

Do nothing. All files in this dir are eager loaded in production and lazy loaded in development by default.

This gist is no longer valid. Please see Compass-Rails for instructions on how to install.

	#
	# Proof of concept - import maps with JSX transpilation. Can trivially
	# be extended to TypeScript and all the languages currently supported
	# with Sprockets.
	#
	# There are two parts to this:
	# * Have `find_javascript_files_in_tree` in importmap-rails to not only
	# find JS files, but also files that can be transpiled to JS.
	# * Add sprockets JSX transformer, making use of esbuild
	#

	# Ruby CircleCI 2.0 configuration file
	#
	# Check https://circleci.com/docs/2.0/language-ruby/ for more details
	#

	defaults: &defaults
	working_directory: ~/repo
	docker:
	- image: circleci/ruby:2.4.1-node-browsers
	environment:

	How to convert existing phoenix app to an umbrella app.
	https://elixir-lang.slack.com/archives/phoenix/p1472921051000134


	chrismccord [10:14 PM]
	@alanpeabody yes, it's straightforward

	[10:14]
	1) mix new my_umbrella --umbrella

	# http://henrik.nyh.se/2008/12/git-dirty-prompt
	# http://www.simplisticcomplexity.com/2008/03/13/show-your-git-branch-name-in-your-prompt/
	# username@Machine ~/dev/dir[master]$ # clean working directory
	# username@Machine ~/dev/dir[master*]$ # dirty working directory

	function parse_git_dirty {
	[[ $(git status 2> /dev/null \| tail -n1) != "nothing to commit (working directory clean)" ]] && echo "*"
	}
	function parse_git_branch {
	git branch --no-color 2> /dev/null \| sed -e '/^[^]/d' -e "s/ \(.*\)/[\1$(parse_git_dirty)]/"

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Testing Pie Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>

	<style type="text/css">

	<!DOCTYPE html>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name=apple-mobile-web-app-capable content=yes>
	<meta name=apple-mobile-web-app-status-bar-style content=black>
	<title>Test fullscreen</title>
	<style>
	html, body {
	margin: 0;
	padding: 0;