FYP
2022-09-01 20:00:00

Tailwind Integration

I personally like using tailwindcss as an easy-to-use and flexible front-end styling framework in my projects. The following content is a note about how to integrate tailwind with the IC project.

Dependencies Installation

After creating the fyp project, run:

cd ./fyp
npm install --save-dev babel-loader @babel/core @babel/preset-env style-loader css-loader postcss postcss-loader postcss-preset-env tailwindcss

To verify the installation, check package.json file to see if those entries exist.

Modify Webpack Config

Then modify webpack.config.js, there are some commented out code about rules, modify them to:

// ... //

// Depending in the language or framework you are using for
// front-end development, add module loaders to the default
// webpack configuration. For example, if you are using React
// modules and CSS as described in the "Adding a stylesheet"
// tutorial, uncomment the following lines:
module: {
    rules: [
        {
            test: /\.js$/i,
            include: path.resolve(__dirname, 'src'),
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                },
            },
        },
        {
            test: /\.css$/i,
            include: path.resolve(__dirname, 'src'),
            use: ['style-loader', 'css-loader', 'postcss-loader'],
        },
    ],
},

// ... //

Modify PostCSS Configuration

Since we are using tailwind over post-css in this case, we need to create postcss.config.js and add the following content:

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    'postcss-preset-env',
    tailwindcss
  ],
};

Initialize Tailwind

After the 3 steps above, run:

npx tailwindcss init
# OUTPUT: Created Tailwind CSS config file: tailwind.config.js

A tailwind.config.js file was generated in the root directory, modify the content entry like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.html'],
    theme: {
        extend: {},
    },
    plugins: [],
}

Create src/fyp_frontend/src/index.css, add the following lines:

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

Modify src/fyp_frontend/src/index.js, add an import statement:

// . //

import './index.css';

// ... //

And it's recommended to delete the src/fyp_frontend/assets/main.css generated by the project create process, remember to delete the link to main.css in src/fyp_frontend/index.html as well.

Test the Outcome

We can Add a utility class to index.html to verify our work:

 <body class="bg-sky-400">

The page would have a sky-blue background if the integration is successful.

References

Some information in this note come from the following external links: