tailwindcss-setup-examples's People
Forkers
farazpatankar casprine mikemcbride benfurfie opdavies analia-mok syedpeer zblanco andreaseriksson atinux migramcastillo ademers vicainelli mathieutu guillaumebriday jagreehal nencode joedel mikemartin skoontastic deloarbp ptzagk davidberglund mrkentung bmadigan ultrox zoispag tunecino rudyschockaert-engieit webmasterdevlin khoipro jmdisuanco groundedsage adolfojbarreto mayashavin masthisis marekjs antdevine darrenmothersele rotwurstesser pedropalau belgoros jmonday jasonofdain sgoehringer triptych santhoshraju91 robin-bob jerriclynsjohn remotelydev jesper charlievillacr thomasjohnkane chanmathew parvizmoshfeg emilbryggare colincoins sooterbw pawel1892 wildindfw romene jasonliang-dev lguzzon-js thedemodev keiraarts pkayokay doc22940 olieidel galtr hugorodrigues soumiahm mdixon47 akhlis morganandrewv waterdrips mariealine bosunski willmclellarn nathanpen mercyikpe lyuji282 ekpono e03ccd3df65a2d128247 naufaldi nikhilkesari adzz pomelchenko alexxos mattfeldman math4youbyusgroupillinois bismarnay forkkit jasonharris06 praveenjuge goenawanadi sumanthratna harshcrop shrmaky lgs pomiletailwindcss-setup-examples's Issues
request - static version (nunjucks)
Would love to see a static html build using something like nunjucks.
I've got a very basic parcel version but it's not scaling that well as i;m only using include. Something like nunjucks with partials, macros would be amazing.
i'll see if i've got time in the next few weeks to put something together. Putting this out there in case anyone has it already.
initial thought were tailwind, webpack, nunjucks and perhaps storybook for the icing on the cake
Add Golang integration
I try to make a pull request to add Golang supporting but I can't so
i fork the project and make the changes and push them
all changes is in :
https://github.com/sagadsalem/setup-examples
Update Next.js example to include a use in a component-level CSS module
Next.js allows for component-level CSS via CSS modules as documented here.
Can the next.js example be updated to include an example of this?
For example, I tried to use:
.header {
@apply text-lg;
}
in a CSS module and got the following error:
Syntax error: `@apply` cannot be used with `.rows-span-3` because `.rows-span-3` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.rows-span-3` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
Many thanks!
TailwindCSS + ParcelJS + Wordpress Theme ?
Hello guys,
Is it possible to have an example with Tailwind + ParcelJS + Wordpress Theme ? Without LaravelMix.
Thanks
Add express + pug example
Would be great to have a production ready example of how to setup TailwindCSS using only express and pug. ie;
$ yarn dlx express-generator --view=pug tailwind-example
$ cd tailwind-example
$ yarn add tailwindcss --dev
...etc
React Js example
I already worked on this so I add this example
Using Tailwind CSS with CRA
For a recent project, I created a fork of React Scripts and fetches from a tailwind css template pushed to npm.
It can be used with:
npm init react-app folder-name --scripts-version=@agney/rs-tailwind --template=tailwind
Requires @next for now, since some fixes for template are not on major release
With the release of 3.3.0, this is now directly supported.
I was wondering if the repositories could be moved here for better maintanence and visiblity.
tailwindcss + next.js + emotion.js example
Hi!
I love explanation in the tailwindcss + next example! :)
Can we add emotion.js to that example? I think the community would benefit from an explanation about the setup.
Let me know your thoughts. :)
Part of Jekyll template ending up in the style.css file
I am using the Jeykll stater and noticed that whilst I have serving my project part of my template was ending up in _site/css/style.css
. Any idea why this may be happening?
style.css
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/site.css">
<link rel="icon" href="/assets/favicon.ico">
</head>
<html>
<body class="w-full h-full p-0 m-0">
<div class="flex w-full h-full">
<aside class="flex-none w-1/6 h-full px-8 py-10 overflow-y-auto shadow-md">
<div class="border-bottom">
<span class="-mb-3 text-gray-50 h6">Project</span>
<h1 class="mb-10 display-3">Atom</h1>
</div>
<nav class="">
<ul>
<li class="mb-1 hover:bg-violet-10">
<a href="/">Home</a>
</li>
<li class="mb-1 hover:bg-violet-10">
<a href="/spacing-and-sizing">Spacing & Sizing</a>
</li>
<li class="mb-1 hover:bg-violet-10">
<a href="/typography">Typography</a>
</li>
</ul>
</nav>
</aside>
<section class="flex-grow h-full py-10 overflow-y-auto">
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap');
@import url("https://use.typekit.net/ltq4kgq.css");
/* Front matter is necessary for Jekyll */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
An entire global style against Next's default CSS-in-JS
By making all the styles pages/_app.js
available globally, the browser then must download and cache the entire file the first time. Is it different from the Next's default CSS-in-JS where a component has it's own CSS and it only loads when the component it's mounted.
How the difference between them would be? Is it worth?
Next.js example does not support AMP or SSG
I think including the main css in _app.js does not support AMP nor SSG.
Any other example which can work completely right with Next.js?
create-react-app
Hi @adamwathan,
I've created a fork a few months ago of the react-scripts to add TailwindCSS and PurgeCSS: https://github.com/DemianD/create-react-app-tailwindcss
To install a new create-react-app, you should run this command:
npx create-react-app --scripts-version=react-scripts-tailwindcss my-app
Currently, it doesn't support the new TailwindCSS version.
I'll add this in 2 weeks (currently studying for my finals)
I'm not sure how I can contribute to this repository.
We may fork create-react-app
under the tailwindCSS organisation, add TailwindCSS (and PurgeCSS) and publish it to npm. (https://facebook.github.io/create-react-app/docs/alternatives-to-ejecting)
Hot reload doesn't work in Sapper
Making changes in tailwind.css correctly updates the index.css file, but you have to refresh the browser to see the effect. Is this by design or a bug?
Current version of NextJS deprecates the use of next-css package which breaks the setup
From the NextJS Docs
If you are currently using @zeit/next-css we recommend removing the plugin from your next.config.js and package.json, thereby moving to the built-in CSS support upon upgrading.
Tailwind Setup is not working after removing the next-css package.
Update svelte example
As far as I know there is no more need to import @fullhuman/postcss-purgecss
and we should use purge
option in tailwind config. The docs should be updated I guess.
Easy Symfony setup.
To use Tailwind with Symfony you can use the PostCSS setup instructions and near the bottom of webpack.config.js put:
.enablePostCssLoader()
It took me less than 5 minutes and the Symfony webpack settings already know where your assets are located and webpack takes care of everything.
@apply not working in <style>...</style>
Tailwind is great but I'm still stuck writing CSS because I can't use @apply directive in Svelte ... any help to resolve this?
svg {
@apply h-8 w-8 fill-current;
}
Tailwind CSS doesn't get purged
The compiled tailwind css doesn't get purged with the existing setup.
Gastby setup video
As I'm news to Tailwind and Gatsby I'm not sure if this video covers it all, but I seems like a good start.
The tailwindcss example is very wrong now
If I have time I'll update it, but I'm busy on some deadlines right now and don't have the time to do it. Specifically, on the tailwindcss web page, there are details about nextjs 9 vs 10. https://tailwindcss.com/docs/guides/nextjs
The example shows for nextjs 9.2.2. 9.5.5 had lots of problems with css and if you install the compat patch, you get a high serverity warning. Further, you can remove the patch by taking tailwind out of the dependencies section of package.json, but still a hot mess.
This example really needs to be updated to NextJS 10.
https://github.com/tailwindlabs/tailwindcss-setup-examples/tree/master/examples/nextjs
Read-me and resources conflict
Read-me suggests @import
, tailwind.css suggests @tailwind
(Laravel-PostCss-Only version)
The Next.js example throws an error in the console
Just by cloning, installing dependencies and running the example you get this error in the console:
Warning: Did not expect server HTML to contain a <div> in <div>.
Tailwinds not working
I followed the steps on the README to add Tailwinds. But I don't see any effect on my elements when I add Tailwind classes. What am I doing wrong?
Here's my template: https://github.com/Parables/svelte-tailwindcss-template.
Someone please check it out for me and point out what am missing
Update Jekyll to use built-in PurgeCSS
Since v1.4.0 has started to include PurgeCSS in Tailwind, is it possible to use the built-in PurgeCSS with Jekyll and update the setup-example files?
I have yet to get this working on my own site otherwise I would happily contribute.
Sourcemaps not working
Svelte setup example not working
First issue: Running "dev": "run-p start:dev autobuild watch:build"
results in ERROR: Task not found: "watch:build"
. Changing watch:build
to --watch:build
fixes this.
Second issue: To see the result of applying tailwind classes live in the browser, everything needs to be rebuilt by running the build
script—I assume that's not the intended behavior.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.