Skip to content

Instantly share code, notes, and snippets.

@dannyockilson
Created February 14, 2019 12:37
Show Gist options
  • Save dannyockilson/260ca2915d9dda5eb52400acdcc0c662 to your computer and use it in GitHub Desktop.
Save dannyockilson/260ca2915d9dda5eb52400acdcc0c662 to your computer and use it in GitHub Desktop.
Angular + scss(optional) + Tailwindcss
/**
* 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";
*/
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"<project>": {
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
}
}
}
"serve": {
"builder": "@angular-builders/dev-server:generic",
"options": {
"browserTarget": "<project>:build"
},
}
}
}
}
}
// See tailwind documentation
var tailwindcss = require('tailwindcss');
module.exports = {
module: {
rules: [{
test: /\.scss$|\.sass$/,
use: [{
loader: 'postcss-loader',
options: {
plugins: [
tailwindcss('./tailwind.js')
]
}
}]
}]
}
}
@dannyockilson
Copy link
Author

dannyockilson commented Feb 14, 2019

Follow instructions on https://tailwindcss.com/docs/installation using npm installation method.

You will also need to install @angular-builders/custom-webpack see https://www.npmjs.com/package/@angular-builders/custom-webpack

NB: post css configuration is added to custom webpack builder NOT postcss.config.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment