v1 Styling

The client's Webpack configuration will load CSS for you by default, so you can import "path/to/style.css"; as you can with Create React App and everything should just work. However, it's common to want to use other styling tools, like a CSS preprocessor to reduce the verbosity of your style files.

SASS

For example, you may want to add in SASS support. To do this, you need to install two new dependencies, Webpack's sass-loader and Dart Sass:

npm install --save-dev sass-loader sass

and add a new rule for .scss files to client/webpack/common.config.js:

diff --git a/client/webpack/common.config.js b/client/webpack/common.config.js
index f6757dd..e1a245f 100644
--- a/client/webpack/common.config.js
+++ b/client/webpack/common.config.js
@@ -22,6 +22,10 @@ module.exports = {
 				test: /\.css$/,
 				use: ["style-loader", "css-loader"],
 			},
+			{
+				test: /\.s[ac]ss$/,
+				use: ["style-loader", "css-loader", "sass-loader"],
+			},
 		],
 	},
 	output: {

Now you can also import "path/to/style.scss"; or "path/to/style.sass" and see the styles applied to your components.

If you're using tests, you'll also have to update jest.config.js, to ensure all style files get replaced by the mock file:

diff --git a/jest.config.js b/jest.config.js
index f08d705..3323168 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,7 +3,7 @@ module.exports = {
 		{
 			displayName: "client",
 			moduleNameMapper: {
-				"\\.(png|svg|jpe?g|gif|css)$": "<rootDir>/__mocks__/fileMock.js",
+				"\\.(png|svg|jpe?g|gif|s?css|sass)$": "<rootDir>/__mocks__/fileMock.js",
 			},
 			setupFilesAfterEnv: [
 				"<rootDir>/client/setupTests.js",

Tailwind

If you'd like to use Tailwind CSS in your application you'll need to use it as a PostCSS plugin via Webpack's loader (see the installation guide).

• Install the relevant dependencies:

  $ npm install --save-dev autoprefixer postcss postcss-loader tailwindcss

• Create a new file named ./client/tailwind.config.js, containing:

  module.exports = {
    content: [
      "./client/src/**/*.{html,js}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };

• Create a new file named ./client/src/index.css, containing:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

• Update ./client/src/index.js to include:

  import "./index.css";

• Update the CSS loading rule in ./client/webpack/common.config.js:

  diff --git a/client/webpack/common.config.js b/client/webpack/common.config.js
  index f6757dd..0a56744 100644
  --- a/client/webpack/common.config.js
  +++ b/client/webpack/common.config.js
  @@ -20,7 +20,23 @@ module.exports = {
  			},
  			{
  				test: /\.css$/,
  -				use: ["style-loader", "css-loader"],
  +				use: [
  +					"style-loader",
  +					"css-loader",
  +					{
  +						loader: "postcss-loader",
  +						options: {
  +							postcssOptions: {
  +								plugins: {
  +									tailwindcss: {
  +										config: "./client/tailwind.config.js",
  +									},
  +									autoprefixer: {},
  +								},
  +							},
  +						},
  +					},
  +				],
  			},
  		],
  	},

If you run npm run dev or npm run serve at this point, you should see the output includes:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

This tells you that Tailwind is correctly installed and set up, but not currently being used. You should now be able to use Tailwind's CSS classes in your components.