Using Third-party Libraries
Third-party CSS
If you're using third-party CSS such as Bootstrap or Tailwind, you can just import them into your PC documents like so:
<import src="./taiwind.css" inject-styles />
<div className="text-color-black-100 my-1">
Something
</div>
The inject-styles
attribute allows for CSS to be accessible in a document without needing to use a namespace. Keep in mind that styles are only accessible in the document where inject-styles
is applied, so if you're looking to use CSS throughout your app, you'll need to import that CSS explicitly in every document where you'd like to use it.
The Tailwind example is a good place to start if you're looking to do this.
Styling third-party HTML
you can style third-party HTML from Paperclip. Here's a simple example:
<style>
@export {
.my-styles {
/* some components may have nested style rules in the global namespace.
In that case you can use the :global selector */
:global(.nested-rule) {
}
}
}
</style>
Then, in your application code:
import * as ui from "./Component.pc";
import SomeThirdPartyComponent from "some-third-paty-component";
<SomeThirdPartyComponent className={ui.classNames["my-style"]} />