How to set up Crystal Amber framework with Tailwind CSS

This tutorial runs through adding Tailwind CSS to a Crystal Amber project using Webpack and SASS.

It assumes you already have a working Amber project. If not, check out the Installation and Installation and Create New App guides first. You’ll also need Node installed.

This tutorial works sing Node 8.11.4, Crystal: 0.26.1, Amber 0.9.0, Webpack 3.12

Why Tailwind CSS?

There are a lot of reasons to give Tailwind CSS a try, but coming from Bootstrap it can take some adjustment. Some of the things I really like include:

Lots of helper classes built in to help you create a good looking UI.
Really easy to configure and extend it by editing tailwind.js.
Adding new CSS classes by extending the defaults with @apply.
Once you get used to the naming conventions it can be very productive.

Check out the docs for more information

Why Amber?

Coming from someone that enjoys using Ruby on Rails and is intrigued by Crystal, I really like Amber and how familiar it already is. Not to mention it’s blazing fast!

Check out the docs for more information

Using Tailwind with Amber

Add Tailwind CSS and Post CSS to your package.json.

"tailwindcss": "^0.6.5",
"postcss": "^6.0.19",
"postcss-loader": "^2.1.1"

Run yarn install.

In src/assets/stylesheets add postcss.config.js with the following content:

var tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
  tailwindcss('./config/webpack/tailwind.js'),
  require('autoprefixer')
  ],
}

In config/webpack/common.js update the SASS rules to include PostCSS

	  {
		test: /\.scss$/,
		exclude: /node_modules/,
		use: ExtractTextPlugin.extract({
		  fallback: 'style-loader',
		  use: [ 'css-loader', 'postcss-loader', 'sass-loader']
		})
	  },

Create the tailwind.js file inside of config/webpack/ by running the following command.

./node_modules/.bin/tailwind init config/webpack/tailwind.js

Update your src/assets/stylesheets/main.css to inject Tailwind

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;

 /**
  * This injects any component classes registered by plugins.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/components";
  */
 @tailwind components;
 
 /**
  * Here you would add any of your custom component classes; stuff that you'd
  * want loaded *before* the utilities so that the utilities could still
  * override them.
  *
  * Example:
  *
  * .btn { ... }
  * .form-input { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "components/buttons";
  * @import "components/forms";
  */
 
 /**
  * This injects all of Tailwind's utility classes, generated based on your
  * config file.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/utilities";
  */
 @tailwind utilities;
 
 /**
  * Here you would add any custom utilities you need that don't come out of the
  * box with Tailwind.
  *
  * Example :
  *
  * .bg-pattern-graph-paper { ... }
  * .skew-45 { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "utilities/background-patterns";
  * @import "utilities/skew-transforms";
  */

 /**
  * Example usage
  */
  body {
	@apply .bg-red;
  }