TailwindCSS in React Freshdesk App

App Platform
, ,
1

Has anyone been able to create a Freshdesk react app that uses tailwindCSS??

3

Yes, I have been able to use Tailwind successfully in a Freshdesk app.
This app uses Tailwind entirely on its Frontend location.

Here’s a snippet of code from my app.

return (
    <div className="flex h-screen flex-col">
      <div className="flex flex-shrink-0 items-center gap-2 px-8 py-4">
        <img src={Logo} height="24" width="24" alt="AI Smart Assist Logo" />
        <h3 className="m-0 text-2xl font-medium text-[#183247]">
          <FormattedMessage id="home_page.app_name" />
        </h3>
      </div>
      <div className="h-full overflow-y-auto overflow-x-hidden px-8 py-0">
        <SectionsList
          loggedInUser={loggedInUser}
          rules={rules}
          ticket={{
            id: ticket.id,
            description_text: ticket.description_text,
            subject: ticket.subject,
          }}
        />
      </div>
    </div>
  );
1 Like
4

This is incredible news!!! i have been struggling to get this working for a few days. i feel like i have tried every instillation method listed on tailwinds website and have spent hours prompting chatgpt for answers. would you be able to share your instillation process?

5

Here’s what worked for me to get Tailwindcss working in a Freshdesk React application.

Step 1: Build a single page application using React

Step 2: Use a custom webpack config for your React app

Step 3: Install Tailwind using postcss

Step 4: Create tailwind.config.js in the root of your Freshworks app

const { tailwindLayouts } = require('tailwind-layouts');
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,html}'],
  theme: {
    extend: {}
  },
  plugins: [tailwindLayouts],
};

Step 5: Configure webpack.config.js

After Step 2, modify your webpack.config.js to look like this.

const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  resolve: {
    // ...
    fallback: {
      fs: false,
      os: false,
      path: false,
    },
  },
  entry: {
    main: ['@babel/polyfill', `${process.cwd()}/src/index.js`],
  },
  output: {
    globalObject: 'this',
    path: `${process.cwd()}/app/scripts`,
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].js',
    publicPath: './scripts',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx|test.js)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'tailwindcss',
                    {
                      // Options
                    },
                  ],
                  [
                    'autoprefixer',
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name][contenthash:8].[ext]',
              outputPath: '/assets/img',
              esModule: false,
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin({
      dangerouslyAllowCleanPatternsOutsideProject: true,
      dry: false,
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css',
      chunkFilename: '[name].[contenthash:8].css',
    }),
    new HtmlWebPackPlugin({
      template: `${process.cwd()}/public/index.html`,
      filename: `${process.cwd()}/app/index.html`,
    }),
  ],
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          chunks: 'all',
        },
      },
    },
  },
};

Step 6: Create postcss.config.js in the root of your Freshworks project

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Step 7: Replace index.css file in your React application with the following.

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

@layer base {
	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
			"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
			sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		height: 100%;
		overflow: hidden;
	}
}

Step 8: Run “fdk run” in your Freshworks app project

Step 9: Start using Tailwindcss in your React component files

1 Like
6

You are a hero!!! the lessons linked above are also incredible!!! thank you so much for your help

1 Like
7

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.