tailwindlabs / tailwindcss-setup-examples Goto Github PK

View Code? Open in Web Editor NEW

678.0 678.0 171.0 2.95 MB

tailwindcss-setup-examples's People

Contributors

Stargazers

Watchers

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 pomile

tailwindcss-setup-examples's Issues

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. :)

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.

Tailwind CSS doesn't get purged

The compiled tailwind css doesn't get purged with the existing setup.

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)

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.

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

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;
}

TailwindCSS + ParcelJS + Wordpress Theme ?

Hello guys,

Is it possible to have an example with Tailwind + ParcelJS + Wordpress Theme ? Without LaravelMix.

Thanks

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.

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

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 */
}

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?

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?

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?

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

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.

Sourcemaps not working

Tested by cloning and running the Next.js example.

Clicking through to utilities.css:1 shows:

Is there a way to see Tailwind's CSS declarations in a source map for local dev and debugging?

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.

React Js example

I already worked on this so I add this example

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.

https://www.youtube.com/watch?v=d0v_ouu5mqU

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

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

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>.

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!

Read-me and resources conflict

Read-me suggests @import, tailwind.css suggests @tailwind (Laravel-PostCss-Only version)