Quick Start
Create a ProjectEdit a PageLink to a PageSet a TemplatePrepare for SEOPublish to the WebSet up a Custom DomainBasics
Project StructureMarkdownJSXMDXMarkdocES ModulesCSS StylingTailwind CSSMetadataLayout and Design
LayoutsTemplatesResponsive DesignsUsing ColorsTypographyMathematicsPublishing
SEO and SharingCustom DomainsAnalyticsSitemapsFaviconsGuides
WebflowNotionFramerConfiguration
motif.jsontailwind.config.jsmain.cssApp
Keyboard ShortcutsSlash CommandsInstant SearchOffline AccessDistraction-Free WritingReal-Time CollaborationDesktop AppAdvanced
Motif APIConfigure global CSS styles for your pages.
In the styles
folder, you will find a file named main.css
, where you can define global styles and classes. You can use plain CSS, or use the @apply
directive to use Tailwind CSS classes.
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply text-blueGray-900 !important
}
a {
@apply no-underline text-lightBlue-500 hover:text-lightBlue-600 transition ease-in-out duration-100
}
@keyframes caret {
0%,
100% { opacity: 0 }
50% { opacity: 1 }
}
.animate-caret {
animation: caret 1s cubic-bezier(0.14, 0, 0.16, 1) forwards infinite;
}
::selection, ::-moz-selection {
background: #d2f7f9;
}
If you want to use Tailwind CSS throughout your pages, make sure to keep the
@tailwind
directives at the top of the main.css
file.
© 2022 Motif Land Inc. All rights reserved. This site is built with Motif.