diff --git a/apps/frontend/postcss.config.js b/apps/frontend/postcss.config.js new file mode 100644 index 0000000..c72626d --- /dev/null +++ b/apps/frontend/postcss.config.js @@ -0,0 +1,15 @@ +const { join } = require('path'); + +// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build +// option from your application's configuration (i.e. project.json). +// +// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries + +module.exports = { + plugins: { + tailwindcss: { + config: join(__dirname, 'tailwind.config.js'), + }, + autoprefixer: {}, + }, +}; diff --git a/apps/frontend/project.json b/apps/frontend/project.json index 942d5d0..9481407 100644 --- a/apps/frontend/project.json +++ b/apps/frontend/project.json @@ -19,7 +19,8 @@ "styles": ["apps/frontend/src/styles.scss"], "scripts": [], "isolatedConfig": true, - "webpackConfig": "apps/frontend/webpack.config.js" + "webpackConfig": "apps/frontend/webpack.config.js", + "postcssConfig": "apps/frontend/postcss.config.js" }, "configurations": { "development": { diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss index 90d4ee0..844323d 100644 --- a/apps/frontend/src/styles.scss +++ b/apps/frontend/src/styles.scss @@ -1 +1,4 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; /* You can add global styles to this file, and also import other style files */ diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js new file mode 100644 index 0000000..e1cf7ce --- /dev/null +++ b/apps/frontend/tailwind.config.js @@ -0,0 +1,17 @@ +const { createGlobPatternsForDependencies } = require('@nx/react/tailwind'); +const { join } = require('path'); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + join( + __dirname, + '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}' + ), + ...createGlobPatternsForDependencies(__dirname), + ], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/package.json b/package.json index fb74682..ee86e45 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "@typescript-eslint/parser": "^5.58.0", "@vitejs/plugin-react": "^4.0.0", "@vitest/ui": "^0.32.0", + "autoprefixer": "10.4.13", "babel-jest": "^29.4.1", "babel-plugin-styled-components": "1.10.7", "cypress": "^12.11.0", @@ -88,10 +89,12 @@ "jsdom": "~22.1.0", "nx": "16.4.0", "nx-cloud": "latest", + "postcss": "8.4.21", "prettier": "^2.6.2", "prisma": "^4.16.1", "react-refresh": "^0.10.0", "sass": "^1.55.0", + "tailwindcss": "3.2.7", "ts-jest": "^29.1.0", "ts-node": "10.9.1", "typescript": "~5.1.3",