Created
February 14, 2019 12:37
-
-
Save dannyockilson/260ca2915d9dda5eb52400acdcc0c662 to your computer and use it in GitHub Desktop.
Angular + scss(optional) + Tailwindcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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"; | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$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" | |
}, | |
} | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// See tailwind documentation |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var tailwindcss = require('tailwindcss'); | |
module.exports = { | |
module: { | |
rules: [{ | |
test: /\.scss$|\.sass$/, | |
use: [{ | |
loader: 'postcss-loader', | |
options: { | |
plugins: [ | |
tailwindcss('./tailwind.js') | |
] | |
} | |
}] | |
}] | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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-webpackNB: post css configuration is added to custom webpack builder NOT postcss.config.js