spfx-tailwind-sample

Example on how to use TailwindCSS with SPFx

spfx-tailwind-sample's People

Contributors

Watchers

spfx-tailwind-sample's Issues

Inherit section background

Not an issue, just some comments.... Love this repo and article you posted. With a little debugging I was able to use spfx-fast-server-helpers 1.19.2 with spfx 1.19.0. I realized that with the new addition of multi-colored backgrounds, that the semanticColors.bodyBackground defaults to the white section background. What I did instead was add the tailwind css class bg-transparent on the component and it works great! Here's my example:

import * as React from "react";
import type { ITailwind3Props } from "./ITailwind3Props";
import { escape } from "@microsoft/sp-lodash-subset";

export default class Tailwind3 extends React.Component<ITailwind3Props, {}> {
	public render(): React.ReactElement<ITailwind3Props> {
		const {
			description,
      isDarkTheme,
      environmentMessage,
      userDisplayName
		} = this.props;

		return (
      <section className='overflow-hidden p-1 text-bodyText bg-transparent font-sans'>
        <div className="text-center">
          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={"w-full max-w-[420px]"} />
          <h2>Well done, {escape(userDisplayName)}!</h2>
          <div>{environmentMessage}</div>
          <div>Web part property value: <strong>{escape(description)}</strong></div>
        </div>
        <div>
          <h3>Welcome to SharePoint Framework!</h3>
          <p>
            The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
          </p>
          <h4>Learn more about SPFx development:</h4>
          <ul className="no-underline hover:underline">
            <li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li>
            <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li>
            <li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li>
          </ul>
        </div>
      </section>
    );
  }
}

Recommend Projects