React and tailwind front end canister

Developers
1

Hello, I have created a new project using React and tailwind for styling and am trying to deploy it to the IC. I have got managed to get the Hello World quickstart project running locally and have followed the guides to add a stylesheet and use a react framework.

However, I am now trying to add some components such as terms and conditions acceptance on entry but the styling is all wrong and it does not seem to accept the css I am setting.

Here is how my landing page looks from my react application:

image
image785×290 32.3 KB

And here is how it looks when running from a canister:

image
image1538×937 194 KB

I have gone through the tutorials and tried to add the correct tailwind config and webpack loaders but I cannot get it to style properly.

I want to have a front and back end canister setup as in the examples so I can continue with my project and develop back end functionality to deploy to it’s own canister.

Has anyone else had problems like this? Are there any example projects I could have a look at to get some guidance? Thanks!

2

Can you show your talwind.config.js and your file structure, or share your code so it’s easier to understand the issue?

3

Hi, I was able to resolve this issue by pointing my tailwind.config.js to the correct content. Here is the what worked

module.exports = {
  content: ['./dist/*.{html,js,jsx,ts,tsx}',
                 './src/vault_frontend/src/**/*.{js,jsx}'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

and my project setup is like this

image
image208×836 15.8 KB

4

Hi @milowelch

Did you upload this project of yours to GitHub? If yes, can you able to share it?