Using Tailwind CSS with Angular projects
The purpose of this page is to cover how to use and configure Tailwind CSS with Angular projects. It shows the different options available to set it up in existing projects or new projects, and it also contains a set of our recommended setups for using Tailwind CSS in different scenarios that can be found on an Nx workspace.
For an in-depth look on this topic, be sure to check out our blog post Set up Tailwind CSS with Angular in an Nx workspace.
Generating or adding Tailwind CSS support to Angular projects
To generate an Angular application with Tailwind CSS configured run:
❯
npx nx g @nx/angular:app apps/my-app --add-tailwind
To generate an Angular buildable library with Tailwind CSS configured run:
❯
npx nx g @nx/angular:lib libs/my-lib --buildable --add-tailwind
To generate an Angular publishable library with Tailwind CSS configured run:
❯
npx nx g @nx/angular:lib libs/my-lib --publishable --importPath=@my-org/my-lib --add-tailwind
To add Tailwind CSS to an existing Angular application, buildable library or publishable library, run:
❯
npx nx g @nx/angular:setup-tailwind my-project
You can see the available options for the above generator in its docs.
Configuring the content sources for a project and its dependencies
Tailwind CSS scans files looking for class names to generate only the CSS needed by what's being used in those files. To configure which files should be processed, the tailwind.config.js has a content property (formerly called purge in v2). You can find more details on Tailwind's official documentation.
The content property usually consists of a glob pattern to include all the necessary files that should be processed. In an Nx workspace it is very common for a project to have other projects as its dependencies. Setting and updating the glob to reflect those dependencies and their files is cumbersome and error prone.
Nx has a utility function (createGlobPatternsForDependencies) that can be used to construct the glob representation of all files a project depends on (based on the Nx Project Graph).
The function receives a directory path that is used to identify the project for which the dependencies are going to be identified (therefore it needs to be a directory path within a project). It can also receive an optional glob pattern to append to each dependency source root path to conform the final glob pattern. If the glob pattern is not provided, it will default to /**/!(*.stories|*.spec).{ts,html}.
The following is an example of it being used in an application called app1:
1const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
2const { join } = require('path');
3
4module.exports = {
5 content: [
6 join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
7 ...createGlobPatternsForDependencies(__dirname),
8 ],
9 theme: {
10 extend: {},
11 },
12 plugins: [],
13};
14In the above, you are invoking the createGlobPatternsForDependencies utility function with the __dirname of the project root. The utility function will identify the project app1 and obtain its dependencies from the project graph. It will then create the glob patterns for each dependency and return them as an array. If app1 were to have lib1 and lib2 as dependencies, the utility function will return the following glob patterns:
1[
2 'libs/lib1/src/**/!(*.stories|*.spec).{ts,html}',
3 'libs/lib2/src/**/!(*.stories|*.spec).{ts,html}',
4];
5When using Tailwind with Module Federation, Tailwind starts scanning files at the host application, and only includes direct dependencies of that application. As the other applications in the Module Federation are not direct dependencies, but rather runtime dependencies, this can lead to missing classes from being included in your generated Tailwind css file.
This can be fixed in two manners:
- Add an implicit dependency between the host application and the remote applications. This is beneficial because when you make a change to the remote application, the host will know to rebuild to allow Tailwind to find any new Tailwind classes to include.
- Add a path to the
contentarray to include the remote application and its dependencies. This means that when the host is rebuilt it will search for new Tailwind classes to include. It will not mark the host application as affected when you change a remote application, however, so you need to be more proactive on rebuilding the host application.
Tailwind CSS setup scenarios
Configure Tailwind CSS for an application with non-buildable libraries as dependencies
In workspaces with a single application that's consuming non-buildable libraries (libraries without a build target), you only need to configure Tailwind CSS in the application. You can do so by either generating the application with Tailwind CSS already configured or by adding Tailwind CSS to an existing application as shown in a previous section.
In this scenario, the libraries will be processed as part of the application build process and therefore, the application's configuration for Tailwind CSS will be used.
Configure Tailwind CSS for an application with buildable or publishable libraries as dependencies
In workspaces where an application depends on buildable and/or publishable libraries, the application and those libraries need to share the same Tailwind CSS configuration because the libraries have a build target and therefore, they are set to be built on its own. When building the libraries, they need a Tailwind CSS configuration and to avoid inconsistencies, they all (the application and the libraries) need to share the same configuration.
To do so, we recommend using a Tailwind CSS preset and place it in a shared library.
Create a new folder libs/tailwind-preset with a tailwind.config.js file in it with your shared configuration:
1module.exports = {
2 theme: {
3 colors: {
4 primary: {
5 light: '#5eead4',
6 DEFAULT: '#14b8a6',
7 dark: '#0f766e',
8 },
9 secondary: {
10 light: '#bae6fd',
11 DEFAULT: '#0ea5e9',
12 dark: '#0369a1',
13 },
14 white: '#ffffff',
15 black: '#000000',
16 },
17 spacing: {
18 sm: '0.5rem',
19 md: '1rem',
20 lg: '1.5rem',
21 xl: '2rem',
22 },
23 },
24 plugins: [],
25};
26The content property shouldn't be specified in the preset because its value is not common for multiple projects.
Add the project configuration for the project:
1{
2 "projectType": "library",
3 "sourceRoot": "libs/tailwind-preset",
4 "targets": {},
5 "tags": []
6}
7Adjust the application's tailwind.config.js file to use the preset and remove the configuration that's already included in the preset:
1const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
2const { join } = require('path');
3const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config');
4
5module.exports = {
6 presets: [sharedTailwindConfig],
7 content: [
8 join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
9 ...createGlobPatternsForDependencies(__dirname),
10 ],
11};
12Do the same with any buildable or publishable library tailwind.config.js file:
1const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
2const { join } = require('path');
3const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config');
4
5module.exports = {
6 presets: [sharedTailwindConfig],
7 content: [
8 join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
9 ...createGlobPatternsForDependencies(__dirname),
10 ],
11};
12If you're using a publishable library, you want to distribute it with a generated CSS that can be used by the consuming applications. To do so, take a look at this section.
Configure Tailwind CSS for multiple applications sharing the same theme
To configure Tailwind CSS for multiple applications sharing the same theme, our recommendation is to also use a Tailwind CSS preset and place it in a shared library. Please refer to the previous scenario setup and do the same configuration. You'll have to use the shared Tailwind CSS preset in the applications sharing the same theme.
Configure Tailwind CSS for multiple applications with different themes and sharing common buildable or publishable libraries
To configure Tailwind CSS for multiple applications that use different themes and share common buildable or publishable libraries, our recommendation is still to use a Tailwind CSS preset and place it in a shared library. The difference is that instead of using literal CSS values for the configuration values, you would use CSS variables to allow each application to provide different values.
A key aspect in this scenario is that because the same buildable libraries are shared by multiple applications, you need to make sure those libraries use Tailwind CSS utility classes and/or theme keys that are common to all the applications that consume them.
Different applications can still have some extra configuration unique to them, but the unique configuration can't be used by shared libraries, because it's not going to be available for other applications.
As explained in this section, non-buildable libraries are processed as part of the application build process and therefore, they just use the same configuration the application uses.
Create a new folder libs/tailwind-preset with a tailwind.config.js file in it with your shared configuration:
1module.exports = {
2 theme: {
3 colors: {
4 primary: {
5 light: 'var(--primary-light)',
6 DEFAULT: 'var(--primary)',
7 dark: 'var(--primary-dark)',
8 },
9 secondary: {
10 light: 'var(--secondary-light)',
11 DEFAULT: 'var(--secondary)',
12 dark: 'var(--secondary-dark)',
13 },
14 white: 'var(--white)',
15 black: 'var(--black)',
16 },
17 spacing: {
18 sm: 'var(--spacing-sm)',
19 md: 'var(--spacing-md)',
20 lg: 'var(--spacing-lg)',
21 xl: 'var(--spacing-xl)',
22 },
23 },
24 plugins: [],
25};
26Note: The
contentproperty shouldn't be specified in the preset because its value is not common for multiple projects.
Add the project configuration for the project:
1{
2 "projectType": "library",
3 "sourceRoot": "libs/tailwind-preset",
4 "targets": {},
5 "tags": []
6}
7Adjust the tailwind.config.js file of the different applications to use the preset and remove the configuration that's already included in the preset:
1const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
2const { join } = require('path');
3const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config');
4
5module.exports = {
6 presets: [sharedTailwindConfig],
7 content: [
8 join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
9 ...createGlobPatternsForDependencies(__dirname),
10 ],
11};
121const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
2const { join } = require('path');
3const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config');
4
5module.exports = {
6 presets: [sharedTailwindConfig],
7 content: [
8 join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
9 ...createGlobPatternsForDependencies(__dirname),
10 ],
11};
12Do the same with any shared buildable or publishable library tailwind.config.js file:
1const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
2const { join } = require('path');
3const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config');
4
5module.exports = {
6 presets: [sharedTailwindConfig],
7 content: [
8 join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
9 ...createGlobPatternsForDependencies(__dirname),
10 ],
11};
12Add the CSS variable values to the different application styles entry point:
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5:root {
6 /* Colors */
7 --primary-light: #5eead4;
8 --primary: #14b8a6;
9 --primary-dark: #0f766e;
10 --secondary-light: #bae6fd;
11 --secondary: #0ea5e9;
12 --secondary-dark: #0369a1;
13 --white: #ffffff;
14 --black: #000000;
15
16 /* Spacing */
17 --spacing-sm: 0.5rem;
18 --spacing-md: 1rem;
19 --spacing-lg: 1.5rem;
20 --spacing-xl: 2rem;
21}
221@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5:root {
6 /* Colors */
7 --primary-light: #a5b4fc;
8 --primary: #6366f1;
9 --primary-dark: #4338ca;
10 --secondary-light: #e9d5ff;
11 --secondary: #a855f7;
12 --secondary-dark: #7e22ce;
13 --white: #ffffff;
14 --black: #000000;
15
16 /* Spacing */
17 --spacing-sm: 1rem;
18 --spacing-md: 1.5rem;
19 --spacing-lg: 2rem;
20 --spacing-xl: 3rem;
21}
22If you're using a publishable library, you want to distribute it with a generated CSS that can be used by the consuming applications. To do so, take a look at the next section.
Distribute publishable libraries themes
The purpose of publishable libraries is to distribute them outside of the workspace. As such, they should provide the CSS for their components so they can be used by the applications consuming them.
To build and share a theme, you can create a theme file in the library like the following:
1@tailwind components;
2@tailwind utilities;
3
4/* You can omit this if you're not using CSS variables */
5:root {
6 /* Colors */
7 --primary-light: #5eead4;
8 --primary: #14b8a6;
9 --primary-dark: #0f766e;
10 --secondary-light: #bae6fd;
11 --secondary: #0ea5e9;
12 --secondary-dark: #0369a1;
13 --white: #ffffff;
14 --black: #000000;
15
16 /* Spacing */
17 --spacing-sm: 0.5rem;
18 --spacing-md: 1rem;
19 --spacing-lg: 1.5rem;
20 --spacing-xl: 2rem;
21}
22This section assume you've already followed one of the previous sections setup and have the library with Tailwind CSS configured.
Next, you need to configure your project to build the theme when you build the library. Edit the project configuration to have the following targets:
1...
2"build-angular": {
3 "executor": "@nx/angular:package",
4 "outputs": ["{workspaceRoot}/dist/libs/lib1"],
5 "options": {
6 "project": "libs/lib1/ng-package.json"
7 },
8 "configurations": {
9 "production": {
10 "tsConfig": "libs/lib1/tsconfig.lib.prod.json"
11 },
12 "development": {
13 "tsConfig": "libs/lib1/tsconfig.lib.json"
14 }
15 },
16 "defaultConfiguration": "production"
17},
18"build-lib": {
19 "executor": "nx:run-commands",
20 "outputs": ["{workspaceRoot}/dist/libs/lib1"],
21 "configurations": {
22 "production": {
23 "commands": [
24 "nx run lib1:build-angular:production",
25 "tailwindcss -c libs/lib1/tailwind.config.js -i ./libs/lib1/src/styles/my-theme.css -o ./dist/libs/lib1/themes/my-theme.css -m"
26 ]
27 },
28 "development": {
29 "commands": [
30 "nx run lib1:build-angular:development",
31 "tailwindcss -c libs/lib1/tailwind.config.js -i ./libs/lib1/src/styles/my-theme.css -o ./dist/libs/lib1/themes/my-theme.css"
32 ]
33 }
34 },
35 "defaultConfiguration": "production"
36},
37"build": {
38 "executor": "nx:run-commands",
39 "outputs": ["{workspaceRoot}/dist/libs/lib1"],
40 "configurations": {
41 "production": {
42 "commands": [
43 "rm -rf dist/libs/lib1",
44 "nx run lib1:build-lib:production"
45 ],
46 "parallel": false
47 },
48 "development": {
49 "commands": [
50 "rm -rf dist/libs/lib1",
51 "nx run lib1:build-lib:development"
52 ],
53 "parallel": false
54 }
55 },
56 "defaultConfiguration": "production"
57},
58...
59In the above, you are configuring the library build and the Tailwind CSS processing to happen in parallel. Also, you are going to disable the automatic deletion of the output folder that ng-packagr does because that can cause the theme to be deleted. Instead, you configured the build target to delete the output folder and then kick off the library build.
You can have more themes and simply add them to be built in the build-lib target commands.
Update the libs/lib1/ng-package.json file to set the deleteDestPath property to false:
1{
2 ...
3 "deleteDestPath": false
4}
5You can now build the library and the theme CSS will be generated in the output folder as expected.
One important thing to keep in mind is that if you use the default Tailwind CSS utility classes and distribute your theme with them, there can be conflicts with consumer applications that also use Tailwind CSS. To avoid this, you have a couple of options:
- Add a unique prefix to your Tailwind CSS utility classes.
- Create unique CSS classes for your components and theme in general using a Tailwind CSS directive like
@applyor a function liketheme().
If you decide to use a unique prefix, remember to change the utility classes used in your components to use the prefix.