Quick summary on how to configure Angular (8+) to use TailwindCSS as the CSS Framework in your project for building responsive designs.
In this guide we chose the SCSS
option in the AngularCLI setup.
Install TailwindCSS
As stated in the TailwindCSS documentation, we can easily install Tailwind using the following command
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
Install PostCSS packages
PostCSS packages will be used to process TailwindCSS in the Angular project while building the project or during local development
#using npm
npm install postcss-scss postcss-import postcss-loader -D
#using Yarn
yarn add postcss-scss postcss-import postcss-loader -D
Custom webpack for Angular
By using TailwindCSS we need to make changes to the default Webpack configuration that Angular uses. We will use the @angular-builders/custom-webpack
package that will allows us to modify the Angular build configuration without ejecting it.
#using npm
npm install @angular-builders/custom-webpack -D
#using Yarn
yarn add @angular-builders/custom-webpack -D
Create webpack.config.js
Create a webpack.config.js
file in the root of project. Once created we can setup the webpack configuration.
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
}
]
}
};
As you can see in the webpack-config file above, we will process any .scss
files in our project using or the installed postCSS
-packages and we require tailwindcss
as a plugin in our config.
Modify angular.json
configuration
The angular.json
file in the root of the Angular project defines the settings that need to be used when using AngularCLI commands (ng serve
, ng build
)
We will not adjust our angular.json
file manually, but use the AngularCLI to make the changes
- Change the webpack-builder to the installed
@angular-builders/custom-webpack
package for theng build
command
ng config projects.<your-project>.architect.build.builder
@angular-builders/custom-webpack:browser
- Change the webpack configuration to the newly created configuration file for the
ng build
command
ng config
projects.<your-project>.architect.build.options.customWebpackConfig.path webpack.config.js
- When serving the project on a local dev-server, use the
custom-webpack
package
ng config projects.<your-project>.architect.serve.builder
@angular-builders/custom-webpack:dev-server
- When serving the project on a local dev-server, use the custom created
webpack.config
file
ng config projects.<your-project>.architect.serve.builder
@angular-builders/custom-webpack:dev-server
Setup Tailwind configuration
Setting up a custom Tailwind configuration file can be done easily using the following command
npx tailwind init
This will create a tailwind.config.js
file in the root of your project that you can use to extend Tailwind
Docs on extension of TailwindCSS
Add Tailwind to your CSS
Add the following CSS to your styles.scss
in the src
folder to inject Tailwind's base
, components
and utilities
into your CSS
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
All done
Everything should be configured correctly to make use of the Tailwind CSS-library in your Angular Project.
A simple addition of a TailwindCSS utility in your app.component.html
should give you an indication if Tailwind is working correctly in your project.
(It is useful to restart the local development-server ng serve
to make sure that everything compiles correctly)
Top comments (0)