This is a demo workspace setup with a TailwindCSS configuration library.
The way it works is by adding a reference to the tailwind.css file in the styles part of your app's project.json file under the build target.
"styles": [
"apps/base-app/src/styles.css",
{
"bundleName": "tailwindCss",
"inject": true,
"input": "libs/tailwind-styles/tailwind.css"
}
],
This will bundle the tailwind.css file with your app's styles.css file.
next to that you also import the tailwind.config.js as preset into your apps tailwind.config.js file.
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
const sharedTailwindConfig = require('../../libs/tailwind-styles/tailwind.config');
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [sharedTailwindConfig],
content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
};
When using the library within your apps the library do not need any tailwind config, as tailwind will be added in the buildstep of the app.
However, if you want to publish your library, or develop your components in storybook. You'll need to add tailwind config to the lib.
Here you import your preset in the same way
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
const sharedTailwindConfig = require('../../libs/tailwind-styles/tailwind.config');
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [sharedTailwindConfig],
content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
};
for storybook you'll need to add the tailwind.css file to the project.json file of the storybook lib
"storybook": {
"executor": "@storybook/angular:start-storybook",
"options": {
"styles": ["libs/tailwind-styles/tailwind.css"],
"port": 4400,
"configDir": "libs/using-tailwind/.storybook",
"browserTarget": "using-tailwind:build-storybook",
"compodoc": false
},
"configurations": {
"ci": {
"quiet": true
}
}
},