Tailwind Starter
Minimal Tailwind starter theme for WordPress.
This is NOT a regular WordPress theme that is designed to be used with all WordPress blocks. Rather it is meant to be used with elements from Tailwind UI directly hardcoded in the theme, effectively handing over the entire frontend to Tailwind and using WordPress for everything else.
Build
To build the styles / setup local development:
npm install
npx tailwindcss -i ./assets/css/tailwind.css -o ./style.css --watch
Or see https://tailwindcss.com/docs/installation for reference.
Plugins
The theme is not dependent on any plugins, but you may want to use the following:
- Perfmatters (for removing unnecessary elements from WordPress)
- Yoast SEO (or whatever SEO plugin you prefer, to handle
, <meta> tags etc.)</li> </ul> <!-- HTML_TAG_END --></div> <div><h2 class="text-xl font-bold" data-svelte-h="svelte-1mna9pd">Top categories</h2> <div class="categories grid grid-cols-1 md:grid-cols-3 gap-1 lg:grid-cols-4 mt-3"><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/tailwind">tailwind </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/daisyui">daisyui </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/resume">resume </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/portfolio">portfolio </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/email">email </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/blog">blog </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/dashboard">dashboard </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/landing-page">landing-page </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/admin">admin </a><a class="relative grid place-items-center bg-blue-400 hover:bg-blue-600 text-white p-4" href="/category/ecommerce">ecommerce </a></div></div> <footer class="border-t border-gray-400 mt-20 py-4"><ul class="md:flex items-center"><li class="mr-3"><a class="underline hover:text-blue-500" href="/" title="Templates">Templates</a> </li><li class="mr-3"><a class="underline hover:text-blue-500" href="/components" title="Components">Components</a> </li><li class="mr-3"><a class="underline hover:text-blue-500" href="/category" title="Categories">Categories</a> </li><li class="mr-3"><a class="underline hover:text-blue-500" href="/blog" title="Blog">Blog</a> </li><li class="mr-3"><a data-sveltekit-reload="true" class="underline hover:text-blue-500" href="/submit" title="Submit">Submit</a> </li><li class="mr-3"><a class="underline hover:text-blue-500" href="/sitemap.xml" title="Sitemap">Sitemap</a> </li></ul></footer></div> <div class="loader-animation svelte-p14toz" data-svelte-h="svelte-10saoxn"><img src="/loader.svg" alt="Loading Svelte Themes"></div> <div hidden><div class="notifications no-print svelte-1420bpk"></div></div> <script type="application/json" data-sveltekit-fetched data-url="https://api.github.com/graphql" data-hash="1ghg8uk">{"status":200,"statusText":"OK","headers":{},"body":"{\"data\":{\"repository\":{\"id\":\"R_kgDONrpGmQ\",\"stargazerCount\":0,\"updatedAt\":\"2025-01-17T12:01:53Z\",\"homepageUrl\":null,\"openGraphImageUrl\":\"https://opengraph.githubassets.com/f42b96e2da8daed1365c6aef1923d15f95c58f7d420ee310e33ae7e6fb6ff0a1/nickdavis/tailwind-starter\",\"description\":\"Minimal Tailwind starter theme for WordPress\",\"descriptionHTML\":\"\u003Cdiv>Minimal Tailwind starter theme for WordPress\u003C/div>\",\"forkCount\":0,\"url\":\"https://github.com/nickdavis/tailwind-starter\",\"nameWithOwner\":\"nickdavis/tailwind-starter\",\"name\":\"tailwind-starter\",\"readme1\":{\"text\":\"# Tailwind Starter\\n\\nMinimal Tailwind starter theme for WordPress.\\n\\nThis is NOT a regular WordPress theme that is designed to be used with all WordPress blocks. Rather it is meant to be used with elements from Tailwind UI directly hardcoded in the theme, effectively handing over the entire frontend to Tailwind and using WordPress for everything else.\\n\\n## Build\\n\\nTo build the styles / setup local development:\\n\\n```\\nnpm install\\nnpx tailwindcss -i ./assets/css/tailwind.css -o ./style.css --watch\\n```\\n\\nOr see https://tailwindcss.com/docs/installation for reference.\\n\\n## Plugins\\n\\nThe theme is not dependent on any plugins, but you may want to use the following:\\n\\n- Perfmatters (for removing unnecessary elements from WordPress)\\n- Yoast SEO (or whatever SEO plugin you prefer, to handle \u003Ctitle>, \u003Cmeta> tags etc.)\\n\"},\"readme2\":null,\"readme3\":null,\"readme4\":null,\"readme5\":null,\"repositoryTopics\":{\"nodes\":[]},\"owner\":{\"avatarUrl\":\"https://avatars.githubusercontent.com/u/1030574?s=30&u=04e65a7827cb6aeea4739ffbfc581427c2c7e9ff&v=4\",\"url\":\"https://github.com/nickdavis\",\"login\":\"nickdavis\"}}}}"}</script> <script> { __sveltekit_1xl37kt = { base: new URL("..", location).pathname.slice(0, -1), env: {} }; const element = document.currentScript.parentElement; const data = [null,null]; Promise.all([ import("../_app/immutable/entry/start.5b98a7a4.js"), import("../_app/immutable/entry/app.184fe347.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 6], data, form: null, error: null }); }); if ('serviceWorker' in navigator) { addEventListener('load', function () { navigator.serviceWorker.register('../service-worker.js'); }); } } </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" crossorigin="anonymous" ></script> </div> </body> </html>